mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-05-02 01:49:55 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling elements and getting structure into data view

Browse source
This commit is contained in:
Lennart Blom 2018-12-01 11:44:51 +01:00
parent 8ab6ecbf19
commit f6bc4df11f
3 changed files with 213 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

376
src/style.css
View file

@ -15,329 +15,353 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
html>body { html > body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
} }
html, body { html, body {
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
main { main {
margin-bottom: 100px; margin-bottom: 100px;
} }
.section-centerd { .section-centerd {
margin: auto; margin: auto;
} }
.full-table { .full-table {
width: 100%; width: 100%;
border: none; border: none;
} }
.url { .url {
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
} }
.material-card-title-action a { .material-card-title-action a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: inherit; font-weight: inherit;
} }
material-card { material-card {
min-height: 200px; min-height: 200px;
max-width: 75%; max-width: 75%;
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
material-spinner { material-spinner {
align-self: center; align-self: center;
} }
.spinner-wrapper { .spinner-wrapper {
margin-top: 50px; margin-top: 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
material-navbar { material-navbar {
height: 64px; height: 64px;
} }
.logo { .logo {
padding: 0 16px 0 72px; padding: 0 16px 0 72px;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
letter-spacing: .02em; letter-spacing: .02em;
font-weight: 400; font-weight: 400;
} }
h2 { h2 {
padding: 16px; padding: 16px;
margin: auto; margin: auto;
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
line-height: normal; line-height: normal;
overflow: hidden; overflow: hidden;
} }
.list { .list {
display: block; display: block;
padding: 8px 0; padding: 8px 0;
list-style: none; list-style: none;
} }
.list.highlight>li:hover { .list.highlight > li:hover {
background-color: #eee; background-color: #eee;
cursor: pointer; cursor: pointer;
} }
.list>li { .list > li {
box-sizing: border-box; box-sizing: border-box;
line-height: 1; line-height: 1;
height: 48px; height: 48px;
padding: 0 16px; padding: 0 16px;
overflow: hidden; overflow: hidden;
} }
.list>li i.material-icons { .list > li i.material-icons {
margin-right: 32px; margin-right: 32px;
height: 24px; height: 24px;
width: 24px; width: 24px;
font-size: 24px; font-size: 24px;
box-sizing: border-box; box-sizing: border-box;
color: #757575; color: #757575;
} }
.list>li>span { .list > li > span {
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;
box-sizing: border-box; box-sizing: border-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
} }
.material-card-title-action { .material-card-title-action {
-webkit-align-items: center; -webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
display: block; display: block;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
padding: 16px; padding: 16px;
} }
.material-card-title-action h2 { .material-card-title-action h2 {
margin: 0; margin: 0;
} }
material-card table { material-card table {
width: 100%; width: 100%;
border: none; border: none;
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .12);
border-collapse: collapse; border-collapse: collapse;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
background-color: #fff; background-color: #fff;
border: none; border: none;
} }
material-card table th { material-card table th {
font-size: 18px; font-size: 18px;
vertical-align: bottom; vertical-align: bottom;
line-height: 24px; line-height: 24px;
height: 48px; height: 48px;
color: rgba(0, 0, 0, .54); color: rgba(0, 0, 0, .54);
box-sizing: border-box; box-sizing: border-box;
padding: 0 18px 12px 18px; padding: 0 18px 12px 18px;
text-align: right; text-align: right;
} }
.material-card-th-left { .material-card-th-left {
text-align: left; text-align: left;
} }
material-card table tbody tr:hover { material-card table tbody tr:hover {
background-color: #eee; background-color: #eee;
} }
material-card table tbody tr { material-card table tbody tr {
position: relative; position: relative;
height: 48px; height: 48px;
transition-duration: .28s; transition-duration: .28s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-property: background-color; transition-property: background-color;
} }
material-card table td { material-card table td {
font-size: 16px; font-size: 16px;
position: relative; position: relative;
height: 48px; height: 48px;
border-top: 1px solid rgba(0, 0, 0, .12); border-top: 1px solid rgba(0, 0, 0, .12);
border-bottom: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12);
padding: 12px 18px; padding: 12px 18px;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle; vertical-align: middle;
text-align: right; text-align: right;
} }
material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover { material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover {
cursor: pointer; cursor: pointer;
} }
material-card table th.material-card-th-sorted-ascending:hover:before, material-card table th.material-card-th-sorted-descending:hover:before { material-card table th.material-card-th-sorted-ascending:hover:before, material-card table th.material-card-th-sorted-descending:hover:before {
color: rgba(0, 0, 0, .26); color: rgba(0, 0, 0, .26);
} }
material-card table th.material-card-th-sorted-ascending:before, material-card table th.material-card-th-sorted-descending:before { material-card table th.material-card-th-sorted-ascending:before, material-card table th.material-card-th-sorted-descending:before {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
line-height: 1; line-height: 1;
font-size: 16px; font-size: 16px;
content: "\e5d8"; content: "\e5d8";
margin-right: 5px; margin-right: 5px;
vertical-align: sub; vertical-align: sub;
} }
material-card table th.material-card-th-sorted-descending:before { material-card table th.material-card-th-sorted-descending:before {
content: "\e5db"; content: "\e5db";
} }
.material-icons { .material-icons {
color: #777; color: #777;
} }
material-snackbar .toast { material-snackbar .toast {
height: auto; height: auto;
} }
menu { menu {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 16px; right: 16px;
color: #000; color: #000;
} }
menu .overlay { menu .overlay {
position: fixed; position: fixed;
height: 100%; height: 100%;
width: 100%; width: 100%;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
} }
#menu-control-button { #menu-control-button {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
float: right; float: right;
} }
#menu-control-button i { #menu-control-button i {
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
} }
#menu-control-dropdown { #menu-control-dropdown {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.dropdown { .dropdown {
min-width: 124px; min-width: 124px;
padding: 8px 0; padding: 8px 0;
margin: 0; margin: 0;
} }
dropdown-item, #menu-control-dropdown p { dropdown-item, #menu-control-dropdown p {
padding: 0 16px; padding: 0 16px;
margin: auto; margin: auto;
line-height: 48px; line-height: 48px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
} }
#menu-control-dropdown p:hover { #menu-control-dropdown p:hover {
background-color: #eee; background-color: #eee;
} }
#menu-control-dropdown p:active, .material-button-active:active { #menu-control-dropdown p:active, .material-button-active:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
material-popup material-button { material-popup material-button {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
} }
material-popup material-button:hover material-waves { material-popup material-button:hover material-waves {
background-color: hsla(0, 0%, 75%, .2); background-color: hsla(0, 0%, 75%, .2);
} }
material-popup .popup { material-popup .popup {
max-width: 450px; max-width: 450px;
} }
footer { footer {
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
.select-padding { .select-padding {
padding: 20px 0; padding: 20px 0;
} }
select { select {
position: relative; position: relative;
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;
width: 100%; width: 100%;
background: 0 0; background: 0 0;
border: none; border: none;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
height: 24px; height: 24px;
border-bottom: 1px solid #2f6975; border-bottom: 1px solid #2f6975;
appearance: none; appearance: none;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
.copy-to-clipboard { .copy-to-clipboard {
padding: 12px 5px; padding: 12px 5px;
} }
.show-tag-history { .show-tag-history {
width: 30px; width: 30px;
text-align: center; text-align: center;
} }
.remove-tag { .remove-tag {
padding: 12px 5px; padding: 12px 5px;
width: 30px; width: 30px;
text-align: center; text-align: center;
} }
.copy-to-clipboard a:hover { .copy-to-clipboard a:hover {
cursor: pointer; cursor: pointer;
} }
.tag-history-element { .tag-history-element {
padding: 15px; padding: 15px;
margin:5px; margin: 5px;
max-width: 100%;
}
.tag-history-element > div {
padding: 10px;
min-width: 100px;
}
.tag-history-element .id {
position: absolute;
top: 15px;
right: 15px;
}
.tag-history-element .created {
position: absolute;
top: 70px;
right: 15px;
}
.tag-history-element .id span,
.tag-history-element .container span,
.tag-history-element .parent span{
font-size: 12px;
} }

2
src/tags/image-date.tag
View file

@ -32,7 +32,7 @@
return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1]; return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
} }
} }
} };
opts.image.on('creation-date', function(date) { opts.image.on('creation-date', function(date) {
self.date = date; self.date = date;
self.localDate = date.toLocaleString() self.localDate = date.toLocaleString()

17
src/tags/tag-history.tag
View file

@ -26,9 +26,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div show="{ registryUI.taghistory.loadend }"> <div show="{ registryUI.taghistory.loadend }">
<material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element"> <material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element">
<p each="{ entry in guiElement }"> <div each="{ entry in guiElement }" class="{ entry.key }">
{ entry.key } { entry.value } <strong>{ entry.key }</strong><br> <span> { entry.value } </span>
</p> </div>
</material-card> </material-card>
</div> </div>
@ -38,6 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script type="text/javascript"> <script type="text/javascript">
console.log("taghistory script area"); console.log("taghistory script area");
registryUI.taghistory.instance = this; registryUI.taghistory.instance = this;
registryUI.taghistory.display = function () { registryUI.taghistory.display = function () {
var oReq = new Http(); var oReq = new Http();
@ -49,12 +51,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
var elements = JSON.parse(this.responseText).history || []; var elements = JSON.parse(this.responseText).history || [];
for(var index in elements){ for(var index in elements){
var parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {}); var parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {});
console.log(parsedNestedElements);
var guiElements = []; var guiElements = [];
var guiElement = {}; var guiElement = {};
for(var attribute in parsedNestedElements){ for(var attribute in parsedNestedElements){
if(parsedNestedElements.hasOwnProperty(attribute)){ if(parsedNestedElements.hasOwnProperty(attribute)){
var value = parsedNestedElements[attribute];
if(attribute == "created"){
// Todo this must be parsed correctly
}else if(attribute == "container_config" || attribute == "config"){
console.log(value.cmd);
}
guiElement = { guiElement = {
"key": attribute, "key": attribute,
"value": parsedNestedElements[attribute] "value": parsedNestedElements[attribute]
@ -85,6 +91,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
oReq.send(); oReq.send();
}; };
registryUI.taghistory.display(); registryUI.taghistory.display();
registryUI.taghistory.instance.update(); registryUI.taghistory.instance.update();
</script> </script>