blurred background

webapp/index.html

@@ -55,113 +55,60 @@
     <div class="content">
 
 
-      <div class="panel" v-if="search_visible">
-        <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>
-          <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>
+ 
 
-        <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  v-for="auction in ordered_auctions()" v-if="auction.price != null && !auction.is_price_final && !search_visible">
 
-
-      <div class="panel" v-for="auction in ordered_auctions()" v-if="auction.price != null && !auction.is_price_final && !search_visible">
-        <div class="grid-auto">
-          <div>
-            <img :src="auction.thumb" style="vertical-align:middle;">
+        <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 style="overflow: hidden">
+            <a :href="auction.url" target="_">{{auction.desc}}</a>
+            <div class="currency">€ {{auction.price}}</div>
+            <div>{{ts_to_remaining(auction.timestamp)}}</div>
+            <a v-bind:href="auction.gcal">Kalendereintrag</a>
           </div>
-          <div><a :href="auction.url" target="_">{{auction.desc}}</a></div>
-          <div>
-            <div class="badge">{{auction.price}} EUR</div>
-          </div>
-          <div>{{ts_to_remaining(auction.timestamp)}}</div>
-          <a v-bind:href="auction.gcal">Kalendereintrag</a>
         </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>
-        <button @click="search_visible = !search_visible">Sucheinstellungen</button>
-      </div>
-
-
-      <h3>
-        Abgelaufene Aktionen:
-      </h3>
-
-      <div class="panel" v-for="auction in ordered_auctions()" v-if="auction.price != null && auction.is_price_final && !search_visible">
-        <div class="grid-auto">
-          <div>
-            <img :src="auction.thumb" style="vertical-align:middle;">
-            <div>
-              <div class="badge">{{auction.price}} EUR</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="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>
-          <div><a :href="auction.url" target="_">{{auction.desc}}</a></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>
+          <button @click="search_visible = !search_visible">Sucheinstellungen</button>
         </div>
-      </div>
-
-
-
 
       <template>
         <div class="panel" v-if="!account">
@@ -175,10 +122,71 @@
             Suchen sieht.
           </div>
         </div>
-
       </template>
 
 
+      <div class="panel" v-if="search_visible">
+          <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>
+            <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>
+  
+          <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>
 </body>
@@ -202,4 +210,55 @@
     margin-left: auto;
     margin-right: 0;
   }
+
+  .auction {
+    margin: 10px;
+    overflow: hidden;
+  }
+
+  .auction a {
+    color: aquamarine;
+    text-decoration: none;
+    color: #444;
+  }
+
+  .currency {
+    font-weight: bold
+  }
+
+  .blurredthumb {
+    filter: blur(8px);
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+  }
+
+  .thumb {
+
+    width: 100px;
+    height: 100px;
+    float:left;
+    margin-right: 30px;
+    position: relative;
+    background-color: #ccc;
+    overflow: hidden;
+  }
+
+  .thumbimg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+
+  hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding: 0;
+}
 </style>