config_service: release the UI to the front page

appengine/config_service/ui/src/config-ui/front-page.html

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 -->
 
 <link rel="import" href="../../bower_components/app-layout/app-layout.html">
 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../bower_components/paper-styles/shadow.html">
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="config-set-card.html">
 
 <dom-module id="front-page">
   <template>
     <style>
       .center {
-        width: 23%;
+        width: 550px;

[Ryan Tseng, 2017/07/19 22:41:17]

This breaks on mobile (try narrowing the window).  
Check out:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

768px is a common cutoff for mobile screens.

[ayanaadylova, 2017/07/19 23:28:08]

I will do it in a separate CL like Sergey suggested.

         margin: auto;
       }
 
       .config-card { 
         padding-bottom: 1%;
         animation: fadein 1.5s;
       }
 
       @keyframes fadein {
         from {opacity: 0}
         to {opacity: 1}
       }
 
       .loading { text-align: center; }
 
       .search-bar {
         padding-top: 7%;
         padding-bottom: 2%;
       }
 
       .name {
         font-family: sans-serif;
         word-wrap: break-word;
         text-align: center;
       }
 
       paper-search-bar {
         @apply --shadow-elevation-4dp;
-        width: 40%;
+        width: 900px;
         height: 100%;
         margin: auto;
       }
     </style>
 
     <iron-ajax
         id="requestConfigs"
         url="/_ah/api/config/v1/config-sets?include_last_import_attempt=true"
         handle-as="json"
         on-response="_onGotConfigSets"
@@ skipping 13 matching lines @@
         </div>
       </template>
       <template is="dom-if" if="[[_not(isLoading)]]">
         <template is="dom-if" if="[[_isEmpty(searchResults)]]">
           <div class="center name">No config sets found.</div>
         </template>
         <template is="dom-if" if="[[_not(_isEmpty(searchResults))]]">
           <template is="dom-repeat" items="[[searchResults]]" as="config">
             <div class="center config-card">
               <config-set-card
-                  name="[[config.config_set]]" 
-                  last-import-attempt="[[_getLastImportAttempt(config.last_import_attempt)]]">
+                name="[[config.config_set]]" 
+                last-import-attempt="[[_getLastImportAttempt(config.last_import_attempt)]]">
               </config-set-card>
             </div>
           </template>
         </template>
       </template>
     </div>
   </template>
   <script>
     Polymer({
       is: 'front-page',
@@ skipping 62 matching lines @@
         var tempResults = this.configSetList.filter(e => e.config_set.includes(this.query));
         tempResults.sort(function(a, b) {
           return this._formatName(a.config_set).localeCompare(this._formatName(b.config_set));
         }.bind(this));
         this.searchResults = tempResults;
       },
 
     });
   </script>
 </dom-module>