sync

webapp/index.html

@@ -7,8 +7,13 @@
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="theme-color" content="#dddddd">
   <link rel="icon" sizes="128x128" href="icon.png">
+  <link rel="apple-touch-icon" sizes="128x128" href="icon.png">
+  <meta name="theme-color" content="#216e51">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#216e51">
+  <link rel="manifest" href="manifest.json">
 
-
+  <!-- <meta name="theme-color" content="#f7d723">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#f7d723"> -->
 
   <style>
     * {
@@ -17,7 +22,7 @@
     }
 
     #splash {
-      background-color: rgb(50, 75, 55);
+      background-color: #216e51;
       color: rgb(207, 207, 207);
       padding: 10%;
       margin: 0%;
@@ -55,18 +60,19 @@
     <div class="content">
 
 
- 
 
 
 
-      <div  v-for="auction in ordered_auctions()" v-if="auction.price != null && !auction.is_price_final && !search_visible">
+
+      <div v-for="auction in ordered_auctions()"
+        v-if="auction.price != null && !auction.is_price_final && !search_visible">
 
         <div class="auction">
-            <div class="thumb" >
-                <div class="blurredthumb" v-bind:style="{ 'background-image': 'url(' + auction.thumb+ ')' }"></div>
-                <img class="thumbimg" :src="auction.thumb">
-              </div>    
-  
+          <div class="thumb">
+            <div class="blurredthumb" v-bind:style="{ 'background-image': 'url(' + auction.thumb+ ')' }"></div>
+            <img class="thumbimg" :src="auction.thumb">
+          </div>
+
           <div style="overflow: hidden">
             <a :href="auction.url" target="_">{{auction.desc}}</a>
             <div class="currency">€ {{auction.price}}</div>
@@ -78,37 +84,35 @@
       </div>
 
 
-      
-      
-      
-      <div v-for="auction in ordered_auctions()" v-if="auction.price != null && auction.is_price_final && !search_visible">
-        
-        
+      <div v-if="account" class="panel">
+        <h3>Deine Suchen:</h3>
+        <div v-for="(query, url) in queries">
+          Suche <i>"{{display_query(url)}}"</i>: {{Math.round(query.avg_price)}} EUR im Schnitt
+        </div>
+        <button @click="search_visible = !search_visible">Sucheinstellungen</button>
+
+        <h3>Abgelaufene Suchen:</h3>
+      </div>
+
+
+      <div v-for="auction in ordered_auctions()"
+        v-if="auction.price != null && auction.is_price_final && !search_visible">
         <div class="auction">
-          
-          <div class="thumb" >
+          <div class="thumb">
             <div class="blurredthumb" v-bind:style="{ 'background-image': 'url(' + auction.thumb+ ')' }"></div>
             <img class="thumbimg" :src="auction.thumb">
-          </div>    
-          <div style="overflow: hidden">
-              <a :href="auction.url" target="_">{{auction.desc}}</a>
-              <div class="currency">€ {{auction.price}}</div>
-            </div>
           </div>
-          <hr>
-        </div>
-        
-        
-        
-        <div v-if="account" class="panel">
-          <h3>
-            Deine Suchen:
-          </h3>
-          <div v-for="(query, url) in queries">
-            Suche <i>"{{display_query(url)}}"</i>: {{Math.round(query.avg_price)}} EUR im Schnitt
+          <div style="overflow: hidden">
+            <a :href="auction.url" target="_">{{auction.desc}}</a>
+            <div class="currency">€ {{auction.price}}</div>
           </div>
-          <button @click="search_visible = !search_visible">Sucheinstellungen</button>
         </div>
+        <hr>
+      </div>
+
+
+
+
 
       <template>
         <div class="panel" v-if="!account">
@@ -126,66 +130,69 @@
 
 
       <div class="panel" v-if="search_visible">
-          <div align="right">
-            <button @click="search_visible = !search_visible">X</button>
-  
+        <div align="right">
+          <button @click="search_visible = !search_visible">X</button>
+
+        </div>
+        <h1>Neue Suche</h1>
+        Suchen sind das Herzstueck dieser Anwendung. Suchen laufen immer, auch wenn Du nicht online bist. Erstelle eine
+        Suche die moeglichst nur das liefert was Dich interessiert. Das Ausschliessen von Sofortkauf-Artikeln, ein
+        Mindestpreis sowie nur Artikel die eine WBK erfordern kann sinnvoll sein. Vergiss nicht am Ende alle zu
+        speichern!
+        <br>
+        <br>
+        <form>
+          <div class="form-group">
+            <label>Suchbegriff(e), durch Leerzeichen getrennt</label>
+            <input autocapitalize="none" v-model="query.search">
           </div>
-          <h1>Neue Suche</h1>
-          Suchen sind das Herzstueck dieser Anwendung. Suchen laufen immer, auch wenn Du nicht online bist. Erstelle eine Suche die moeglichst nur das liefert was Dich interessiert. Das Ausschliessen von Sofortkauf-Artikeln, ein Mindestpreis sowie nur Artikel die eine WBK erfordern kann sinnvoll sein. Vergiss nicht am Ende alle zu speichern!
-          <br>
-          <br>
-          <form>
-            <div class="form-group">
-              <label>Suchbegriff(e), durch Leerzeichen getrennt</label>
-              <input autocapitalize="none" v-model="query.search">
-            </div>
-            <div class="form-group">
-              <label>Maximalpreis</label>
-              <input type="number" v-model="query.maxprice">
-            </div>
-            <div class="form-group">
-              <label>Mindestpreis</label>
-              <input type="number" v-model="query.minprice">
-            </div>
-            <div class="form-group">
-              <input type="checkbox" v-model="query.restricted">
-              <label>WBK noetig?</label>
-            </div>
-              <label>Auktionstyp</label>
-              <div class="form-group">
-              <select v-model="query.type">
-                <option v-bind:value="1">Nur Auktionen</option>
-                <option v-bind:value="2">Nur Sofortkauf</option>
-                <option v-bind:value="3">Alles</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label>Such-URL (Kann man alternativ von eGun-Suche kopieren)</label>
-              <input autocapitalize="none" v-model="query_url">
-            </div>
-          </form>
-          <div>
-            <a v-if="query_url" v-bind:href="query_url" target="_">Suche testen</a>
+          <div class="form-group">
+            <label>Maximalpreis</label>
+            <input type="number" v-model="query.maxprice">
           </div>
-  
-          <div align="right">
-            <button @click="add_query()">Suche hinzufuegen</button>
+          <div class="form-group">
+            <label>Mindestpreis</label>
+            <input type="number" v-model="query.minprice">
           </div>
-  
-          Bestehende Suchen:
-          <div v-for="(query, url) in queries" style="font-size: 0.8em">
-            <button @click="delete_query(url)">X</button> <i>
-              "{{display_query(url)}}"
-  
-            </i>
+          <div class="form-group">
+            <input type="checkbox" v-model="query.restricted">
+            <label>WBK noetig?</label>
           </div>
-  
-          <div align="right">
-  
-            <button @click="save_account()">Alle Suchen permanent speichern</button>
+          <label>Auktionstyp</label>
+          <div class="form-group">
+            <select v-model="query.type">
+              <option v-bind:value="1">Nur Auktionen</option>
+              <option v-bind:value="2">Nur Sofortkauf</option>
+              <option v-bind:value="3">Alles</option>
+            </select>
           </div>
+          <div class="form-group">
+            <label>Such-URL (Kann man alternativ von eGun-Suche kopieren)</label>
+            <input autocapitalize="none" v-model="query_url">
+          </div>
+        </form>
+        <div>
+          <a v-if="query_url" v-bind:href="query_url" target="_">Suche testen</a>
+        </div>
+
+        <div align="right">
+          <button @click="add_query()">Suche hinzufuegen</button>
+        </div>
+
+        Bestehende Suchen:
+        <div v-for="(query, url) in queries" style="font-size: 0.8em">
+          <button @click="delete_query(url)">X</button> <i>
+            "{{display_query(url)}}"
+
+          </i>
         </div>
 
+        <div align="right">
+
+          <button @click="save_account()">Alle Suchen permanent speichern</button>
+        </div>
+      </div>
+
 
     </div>
   </div>
@@ -203,7 +210,7 @@
 
 <style>
   :root {
-    --main-color: #2e442f;
+    --main-color: rgb(33, 110, 81);
   }
 
   .nav-items {
@@ -237,7 +244,7 @@
 
     width: 100px;
     height: 100px;
-    float:left;
+    float: left;
     margin-right: 30px;
     position: relative;
     background-color: #ccc;
@@ -251,6 +258,14 @@
     margin: auto;
   }
 
+  @media screen and (max-width:600px) {
+    #nav-items {
+      width: 50%;
+      box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.404);
+
+    }
+  }
+
   hr {
     display: block;
     height: 1px;
@@ -260,5 +275,5 @@
     margin-left: 10px;
     margin-right: 10px;
     padding: 0;
-}
+  }
 </style>