From 2d8d218d1f75dc7836b886c9d4f96ac076412c5b Mon Sep 17 00:00:00 2001
From: Ale <atasistro@mps.org.uy>
Date: Mon, 23 May 2022 21:22:20 -0300
Subject: [PATCH] Cambio de estilos en la navbar

---
 public/css/app.css | 18 +++++++++++++++---
 public/js/app.js   | 20 ++++++++++++++++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 8f03d64..65e767e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -19,7 +19,7 @@ nav.breadcrumb.is-fixed-top {
 	left: 0;
 	position: fixed;
 	right: 0;
-	z-index: 30;
+	z-index: 0;
 	top: 3.25rem;
 	height: 3.25rem;
 }
@@ -44,10 +44,22 @@ main.has-top-padding {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	width: 100%;
-	position: fixed;	
+	position: fixed;
 	z-index: 15;
 }
 
 main.chisma-abierta {
 	padding-top: 25.5rem !important;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 1024px) {
+    .hide-when-widescreen {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .hide-when-narrowscreen {
+        display: none;
+    }
+}
diff --git a/public/js/app.js b/public/js/app.js
index a4d0e24..6a49af7 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -7,8 +7,10 @@ Vue.component('nav-bar', {
             <a class="navbar-item" href="https://mps.org.uy">
               <img src="/assets/logoMPS.png" height="28">
             </a>
-            <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
-            <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+            <p style="margin:0 auto" class="navbar-item hide-when-widescreen">
+                <slot name="subpedido"></slot>
+            </p>
+            <a class="navbar-item hide-when-widescreen" href="#chismosa" @click.capture="toggleChismosa">
               <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
               <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
             </a>
@@ -20,9 +22,19 @@ Vue.component('nav-bar', {
           </div>
 
           <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
-            <div class="navbar-start has-text-right-mobile">
+            <div class="navbar-start"></div>
+            <div class="navbar-end has-text-right-mobile">
+                <p style="margin:0 auto" class="navbar-item hide-when-narrowscreen">
+                    <slot name="subpedido"></slot>
+                </p>
+                <a class="navbar-item hide-when-narrowscreen" href="#chismosa" @click.capture="toggleChismosa">
+                    <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
+                    <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
+                </a>
                 <!-- Styles nombre del barrio-->
-                <p class="navbar-item"><slot name="gdc"></slot></p>
+                <p class="navbar-item">
+                    <slot name="gdc"></slot>
+                </p>
                 <a class="navbar-item"
                 	onclick="event.preventDefault();
                 	document.getElementById('logout-form').submit();">