feat(riot-mui): upgrade home page with navbar and footer
This commit is contained in:
parent
017f6620f0
commit
d11fd42418
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue