feat(riot-mui): upgrade home page with navbar and footer

Author: Joxit

src/components/dialogs/dialogs-menu.riot

@@ -36,14 +36,22 @@
     on-server-change="{ props.onServerChange }"
   ></remove-registry-url>
   <div class="container">
-    <material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
+    <material-button
+      onClick="{ onClick }"
+      waves-center="true"
+      waves-opacity="0.6"
+      waves-duration="600"
+      color="rgba(0,0,0,0)"
+      text-color="#fff"
+      icon
+    >
       <i class="material-icons">more_vert</i>
     </material-button>
     <material-dropdown-list
       items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }"
       onSelect="{ onDropdownSelect }"
       opened="{ state.isDropdownOpened }"
-    />
+    ></material-dropdown-list>
   </div>
   <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
   <script>
@@ -114,14 +122,12 @@
       z-index: 10;
     }
 
-    :host material-button {
-      background: rgba(255, 255, 255, 0);
+    :host material-button button {
       float: right;
       z-index: 2;
     }
 
     :host material-button .content i.material-icons {
-      color: #fff;
       font-size: 24px;
     }
 

src/components/docker-registry-ui.riot

@@ -17,15 +17,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <docker-registry-ui>
   <header>
     <material-navbar>
-      <div class="logo">Docker Registry UI</div>
-      <search-bar on-search="{ onSearch }"></search-bar>
-      <dialogs-menu
-        if="{props.singleRegistry !== 'true'}"
-        on-notify="{ notifySnackbar }"
-        on-server-change="{ onServerChange }"
-        default-registries="{ props.defaultRegistries }"
-        read-only-registries="{ truthy(props.readOnlyRegistries) }"
-      ></dialogs-menu>
+      <span class="logo">Docker Registry UI</span>
+      <div class="menu">
+        <search-bar on-search="{ onSearch }"></search-bar>
+        <dialogs-menu
+          if="{props.singleRegistry !== 'true'}"
+          on-notify="{ notifySnackbar }"
+          on-server-change="{ onServerChange }"
+          default-registries="{ props.defaultRegistries }"
+          read-only-registries="{ truthy(props.readOnlyRegistries) }"
+        ></dialogs-menu>
+      </div>
     </material-navbar>
   </header>
   <main>
@@ -81,9 +83,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <material-snackbar message="{ state.snackbarMessage }" is-error="{ state.snackbarIsError }"></material-snackbar>
   </main>
   <footer>
-    <material-footer>
-      <a slot="logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI { version }</a>
-      <ul slot="link-list">
+    <material-footer mini="true">
+      <a class="material-footer-logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI { version }</a>
+      <ul>
         <li>
           <a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a>
         </li>
@@ -197,4 +199,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       stringToArray,
     };
   </script>
+  <style>
+    material-navbar {
+      height: 64px;
+    }
+    
+    material-navbar .nav-wrapper {
+      align-items: center;
+    }
+    
+  </style>
 </docker-registry-ui>

src/components/search-bar.riot

@@ -1,5 +1,5 @@
 <search-bar>
-  <material-input placeholder="Search in page"></material-input>
+  <material-input label="Search in page" text-color="#fff" label-color="#aaa"></material-input>
   <script>
     import { router } from '@riotjs/route';
 
@@ -39,10 +39,9 @@
   </script>
   <style>
     :host material-input {
-      position: absolute;
-      top: 0em;
-      right: 64px;
+      line-height: initial;
       max-width: 20%;
+      min-width: 13em;
     }
 
     @media screen and (max-width: 400px) {

src/style.scss

@@ -32,6 +32,7 @@
 
 html > body {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
+  font-size: 16px;
 }
 
 html, body {
@@ -117,14 +118,6 @@ material-spinner {
   flex-direction: column;
 }
 
-material-navbar {
-  height: 64px;
-}
-
-material-navbar nav-wrapper {
-  display: flex;
-}
-
 .logo {
   padding: 0 16px 0 72px;
   text-decoration: none;
@@ -260,13 +253,15 @@ material-card table th {
   text-align: left;
 }
 
-material-card material-button:hover,
+material-card .material-card-title-action material-button:hover a,
+material-card .material-card-title-action material-button:hover button,
 material-card table tbody tr:hover,
 pagination material-button:hover  {
-  background-color: #eee;
+  background-color: #eee !important;
 }
 
-material-card material-button,
+material-card material-button a,
+material-card material-button button,
 material-card table tbody tr,
 pagination material-button  {
   transition-duration: .28s;