mirror of
https://github.com/Joxit/docker-registry-ui.git
synced 2025-04-27 15:39:54 +03:00
Styling elements and getting structure into data view
This commit is contained in:
Lennart Blom
parent
8ab6ecbf19
commit
f6bc4df11f
3 changed files with 213 additions and 182 deletions
376
src/style.css
376
src/style.css
|
|
@ -15,329 +15,353 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
html>body {
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
|
||||
html > body {
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.section-centerd {
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.full-table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.url {
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.material-card-title-action a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
material-card {
|
||||
min-height: 200px;
|
||||
max-width: 75%;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
min-height: 200px;
|
||||
max-width: 75%;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
material-spinner {
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.spinner-wrapper {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
material-navbar {
|
||||
height: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 16px 0 72px;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: .02em;
|
||||
font-weight: 400;
|
||||
padding: 0 16px 0 72px;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
letter-spacing: .02em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 16px;
|
||||
margin: auto;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
margin: auto;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
list-style: none;
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list.highlight>li:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
.list.highlight > li:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list>li {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
.list > li {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list>li i.material-icons {
|
||||
margin-right: 32px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
box-sizing: border-box;
|
||||
color: #757575;
|
||||
.list > li i.material-icons {
|
||||
margin-right: 32px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
box-sizing: border-box;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.list>li>span {
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
.list > li > span {
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.material-card-title-action {
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.material-card-title-action h2 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
material-card table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
position: relative;
|
||||
border: 1px solid rgba(0, 0, 0, .12);
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
position: relative;
|
||||
border: 1px solid rgba(0, 0, 0, .12);
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
material-card table th {
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
line-height: 24px;
|
||||
height: 48px;
|
||||
color: rgba(0, 0, 0, .54);
|
||||
box-sizing: border-box;
|
||||
padding: 0 18px 12px 18px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
line-height: 24px;
|
||||
height: 48px;
|
||||
color: rgba(0, 0, 0, .54);
|
||||
box-sizing: border-box;
|
||||
padding: 0 18px 12px 18px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.material-card-th-left {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
material-card table tbody tr:hover {
|
||||
background-color: #eee;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
material-card table tbody tr {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
transition-duration: .28s;
|
||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
transition-property: background-color;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
transition-duration: .28s;
|
||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
material-card table td {
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
border-top: 1px solid rgba(0, 0, 0, .12);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
padding: 12px 18px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
border-top: 1px solid rgba(0, 0, 0, .12);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
padding: 12px 18px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
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 {
|
||||
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 {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
content: "\e5d8";
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
content: "\e5d8";
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
material-card table th.material-card-th-sorted-descending:before {
|
||||
content: "\e5db";
|
||||
content: "\e5db";
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: #777;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
material-snackbar .toast {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
menu {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 16px;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
menu .overlay {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#menu-control-button {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
float: right;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
float: right;
|
||||
}
|
||||
|
||||
#menu-control-button i {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#menu-control-dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 124px;
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
min-width: 124px;
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dropdown-item, #menu-control-dropdown p {
|
||||
padding: 0 16px;
|
||||
margin: auto;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
margin: auto;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu-control-dropdown p:hover {
|
||||
background-color: #eee;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#menu-control-dropdown p:active, .material-button-active:active {
|
||||
background-color: #e0e0e0;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
material-popup material-button {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
material-popup material-button:hover material-waves {
|
||||
background-color: hsla(0, 0%, 75%, .2);
|
||||
background-color: hsla(0, 0%, 75%, .2);
|
||||
}
|
||||
|
||||
material-popup .popup {
|
||||
max-width: 450px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.select-padding {
|
||||
padding: 20px 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
select {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
border-bottom: 1px solid #2f6975;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
border-bottom: 1px solid #2f6975;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.copy-to-clipboard {
|
||||
padding: 12px 5px;
|
||||
padding: 12px 5px;
|
||||
}
|
||||
|
||||
.show-tag-history {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.remove-tag {
|
||||
padding: 12px 5px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
padding: 12px 5px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copy-to-clipboard a:hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tag-history-element {
|
||||
padding: 15px;
|
||||
margin:5px;
|
||||
padding: 15px;
|
||||
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;
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
opts.image.on('creation-date', function(date) {
|
||||
self.date = date;
|
||||
self.localDate = date.toLocaleString()
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<div show="{ registryUI.taghistory.loadend }">
|
||||
|
||||
<material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element">
|
||||
<p each="{ entry in guiElement }">
|
||||
{ entry.key } { entry.value }
|
||||
</p>
|
||||
<div each="{ entry in guiElement }" class="{ entry.key }">
|
||||
<strong>{ entry.key }</strong><br> <span> { entry.value } </span>
|
||||
</div>
|
||||
|
||||
</material-card>
|
||||
</div>
|
||||
|
|
@ -38,6 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript">
|
||||
console.log("taghistory script area");
|
||||
|
||||
|
||||
|
||||
registryUI.taghistory.instance = this;
|
||||
registryUI.taghistory.display = function () {
|
||||
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 || [];
|
||||
for(var index in elements){
|
||||
var parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {});
|
||||
console.log(parsedNestedElements);
|
||||
|
||||
var guiElements = [];
|
||||
var guiElement = {};
|
||||
for(var attribute in parsedNestedElements){
|
||||
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 = {
|
||||
"key": attribute,
|
||||
"value": parsedNestedElements[attribute]
|
||||
|
|
@ -85,6 +91,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
oReq.send();
|
||||
};
|
||||
|
||||
|
||||
registryUI.taghistory.display();
|
||||
registryUI.taghistory.instance.update();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue