Implemented interaction with docker registry.
This commit is contained in:
3
app/application/resources/site/images/icons/download.svg
Normal file
3
app/application/resources/site/images/icons/download.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
|
||||
</svg>
|
After Width: | Height: | Size: 335 B |
@@ -3,3 +3,4 @@ import.meta.glob([
|
||||
]);
|
||||
import './bootstrap';
|
||||
import './_menu.js';
|
||||
import './block-copy.js';
|
||||
|
21
app/application/resources/site/js/block-copy.js
Normal file
21
app/application/resources/site/js/block-copy.js
Normal file
@@ -0,0 +1,21 @@
|
||||
[].slice.call(document.querySelectorAll('.block-copy')).map(function(el) {
|
||||
|
||||
let button = el.querySelector('button');
|
||||
button.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(el.querySelector('.block-copy-text').textContent)
|
||||
.then(() => {
|
||||
button.textContent = button.getAttribute('data-copy-success');
|
||||
setTimeout(function () {
|
||||
button.textContent = button.getAttribute('data-default');
|
||||
}, 3000);
|
||||
})
|
||||
.catch(err => {
|
||||
button.textContent = button.getAttribute('data-copy-error');
|
||||
setTimeout(function () {
|
||||
button.textContent = button.getAttribute('data-default');
|
||||
}, 3000);
|
||||
console.log('Something went wrong', err);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
@@ -1,6 +1,11 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
@import "reset";
|
||||
@import "layout";
|
||||
@import "table";
|
||||
@import "forms";
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "pagination";
|
||||
@import "block-profile";
|
||||
@import "repository";
|
||||
@import "generated-token";
|
||||
|
18
app/application/resources/site/scss/block-profile.scss
Normal file
18
app/application/resources/site/scss/block-profile.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.block-profile {
|
||||
border-radius: 9px;
|
||||
border: 1px solid #ddd;
|
||||
background: #eee;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.block-profile__line {
|
||||
padding-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
@@ -23,6 +23,10 @@
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
@@ -54,12 +58,20 @@
|
||||
padding: 12px 30px;
|
||||
color: #fff;
|
||||
transition: opacity 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
.button:hover {
|
||||
opacity: 0.8;
|
||||
border-color: #006ce7;
|
||||
color: #ccc;
|
||||
}
|
||||
.button.button-red {
|
||||
border: 1px solid #FF2D20;
|
||||
background: #9a241f;
|
||||
}
|
||||
|
||||
.captcha-service-kor-elf {
|
||||
position: relative;
|
||||
@@ -70,6 +82,7 @@
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
padding: 14px 24px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
@@ -85,3 +98,11 @@
|
||||
border: 1px solid #dc3545;
|
||||
color: #dc3545;
|
||||
}
|
||||
.form__example {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
.form__example__block {
|
||||
display: block;
|
||||
}
|
||||
|
33
app/application/resources/site/scss/generated-token.scss
Normal file
33
app/application/resources/site/scss/generated-token.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
#generated-token {
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.generated-token__content {
|
||||
background: #fff;
|
||||
max-width: 600px;
|
||||
margin: 30px auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.warning {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #FF2D20;
|
||||
color: #88302a;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.generated-token__content__head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
@@ -20,7 +20,7 @@ hr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 69px);
|
||||
}
|
||||
|
||||
#menu {
|
||||
@@ -77,13 +77,36 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.block-copy {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
padding: 7px 10px;
|
||||
border-radius: 9px;
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
margin-top: 30px;
|
||||
|
||||
.block-copy-text {
|
||||
white-space: break-spaces;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.container-width {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
h1 {
|
||||
.h1 {
|
||||
font-size: 27px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
@@ -92,6 +115,33 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.margin-bottom-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.quantity_pulls {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.quantity_pulls:before {
|
||||
content: ' ';
|
||||
background: url('../images/icons/download.svg') left top no-repeat;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.container-width {
|
||||
max-width: 1200px;
|
||||
@@ -123,4 +173,19 @@ hr {
|
||||
#content {
|
||||
grid-area: section-content;
|
||||
}
|
||||
.block-copy {
|
||||
margin-top: 0;
|
||||
|
||||
button {
|
||||
display: none;
|
||||
right: 5px;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-copy:hover {
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
41
app/application/resources/site/scss/pagination.scss
Normal file
41
app/application/resources/site/scss/pagination.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.pagination {
|
||||
list-style: none;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 10px;
|
||||
|
||||
span, a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 7px 5px;
|
||||
width: 40px;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
font-weight: bold;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
a, span {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
155
app/application/resources/site/scss/repository.scss
Normal file
155
app/application/resources/site/scss/repository.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
.content-repositories {
|
||||
padding-top: 10px;
|
||||
|
||||
.h1 {
|
||||
.button__create {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-repositories__list__item {
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
.content-repositories__list__item__head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content-repositories__list__item__line {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.content-repositories__list__item__updated {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.content-repositories__menu {
|
||||
list-style: none;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
transition: opacity 0.2s ease-out;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
a:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
li.active {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #006400;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-repositories__overview__command {
|
||||
background: #eee;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content-repositories__overview__command__head {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.content-repositories__overview__content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content-repositories__overview__border {
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.content-repositories__tag__content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content-repositories__tag__info {
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-repositories__tag {
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.content-repositories {
|
||||
.h1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.content-repositories__buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-moz-box-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.content-repositories__overview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content-repositories__overview__content {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.content-repositories__overview__command {
|
||||
order: 2;
|
||||
width: 350px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.content-repositories__tag__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content-repositories__tag__command {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
18
app/application/resources/site/scss/table.scss
Normal file
18
app/application/resources/site/scss/table.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.block-table {
|
||||
overflow: auto;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user