Skip to content

Commit

Permalink
Clear Logs and View Logs Functionality Added (#168)
Browse files Browse the repository at this point in the history
  • Loading branch information
@namithj
namithj authored Nov 13, 2024
1 parent f6e835d commit 79b36a3
Show file tree
Hide file tree
Showing 6 changed files with 437 additions and 100 deletions.
214 changes: 136 additions & 78 deletions assets/css/aspire-update.css
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
@keyframes glow {
0% {
background-color: rgba(255, 223, 0, 0.1);
}
0% {
background-color: rgba(255, 223, 0, 0.1);
}

100% {
background-color: none;
}
100% {
background-color: none;
}
}

.glow-reveal {
animation: glow 0.5s ease-in-out;
animation: glow 0.5s ease-in-out;
}

.aspireupdate-settings-field-hosts-wrapper .aspireupdate-settings-field-hosts-row {
margin: 0 0 10px;
margin: 0 0 10px;
}

#aspireupdate-generate-api-key {
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/icon-key.svg) no-repeat center center / 24px 24px;
background-color: #cbcbcb;
border: 1px solid #8c8f94;
border-radius: 3px;
clip-path: inset(0 0 0 0);
color: transparent;
cursor: pointer;
transition: background-color 0.3s ease;
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/icon-key.svg) no-repeat center center / 24px 24px;
background-color: #cbcbcb;
border: 1px solid #8c8f94;
border-radius: 3px;
clip-path: inset(0 0 0 0);
color: transparent;
cursor: pointer;
transition: background-color 0.3s ease;
}

#aspireupdate-generate-api-key:hover {
background-color: #e3e3e3;
background-color: #e3e3e3;
}

.aspireupdate-settings-field-wrapper p.error {
color: #bc3b3b;
display: none;
color: #bc3b3b;
display: none;
}

.aspireupdate-notice {
Expand All @@ -47,88 +47,138 @@
}

.aspireupdate-notice p::before {
content: '';
content: "";
display: inline-block;
margin-inline-end: .5em;
margin-inline-end: 0.5em;
vertical-align: middle;
background: url(../images/aspirepress-logo-icon.svg) no-repeat center center / 20px 20px;
height: 20px;
width: 20px;
background: url(../images/aspirepress-logo-icon.svg) no-repeat center center / 20px 20px;
height: 20px;
width: 20px;
}

#voltron {
color: transparent;
font-size: clamp(4px, 0.9vw, 8px);
line-height: 6px;
display: inline-block;
cursor: default;
.button.button-clearlog {
border-color: #b32d2e;
color: #b32d2e;
}

#voltron:hover {
animation: blink 1.8s ease-in-out infinite;
animation-delay: 5s;
#aspireupdate-log-viewer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999998;
display: none;
}

@keyframes blink {
0%,
100% {
color: inherit;
}
50% {
color: transparent;
}
#aspireupdate-log-viewer:before {
content: "";
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999998;
background: rgba(255, 255, 255, 0.9);
}

#aspireupdate-log-viewer .outer {
position: fixed;
width: calc(100% - 60px);
height: calc(100% - 60px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightgray;
z-index: 999999;
box-shadow: 0 0 5px #000;
padding: 15px;
}

#aspireupdate-log-viewer .outer span.close {
position: fixed;
right: -1px;
z-index: 999999;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
top: 1px;
text-align: center;
font-weight: 600;
cursor: pointer;
}

@media only screen and (max-width: 576px) {
#voltron {
display: none;
}
=======
#aspireupdate-log-viewer .outer span.close:before,
#aspireupdate-log-viewer .outer span.close:after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 20px;
background-color: #b32d2e;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: top left;
content: '';
}

@keyframes glow {
0% {
background-color: rgba(255, 223, 0, 0.1);
}
#aspireupdate-log-viewer .outer span.close:after {
transform: rotate(-45deg) translate(-50%, -50%);
}

100% {
background-color: none;
}
#aspireupdate-log-viewer .inner {
position: fixed;
width: calc(100% - 40px);
height: calc(100% - 40px);
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
counter-reset: line;
overflow: auto;
}

.glow-reveal {
animation: glow 0.5s ease-in-out;
#aspireupdate-log-viewer .inner div {
display: flex;
align-items: flex-start;
}

.aspireupdate-settings-field-hosts-wrapper .aspireupdate-settings-field-hosts-row {
margin: 0 0 10px;
#aspireupdate-log-viewer .inner>div:nth-child(odd) {
background-color: #e9e9e9;
}

#aspireupdate-generate-api-key {
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/icon-key.svg) no-repeat center center / 24px 24px;
background-color: #cbcbcb;
border: 1px solid #8c8f94;
border-radius: 3px;
clip-path: inset(0 0 0 0);
color: transparent;
cursor: pointer;
transition: background-color 0.3s ease;
#aspireupdate-log-viewer .inner>div:nth-child(even) {
background-color: #e0e0e0;
}

#aspireupdate-generate-api-key:hover {
background-color: #e3e3e3;
#aspireupdate-log-viewer .inner .number {
counter-increment: line;
width: 60px;
text-align: right;
padding-right: 10px;
font-weight: bold;
color: #555;
}

.aspireupdate-settings-field-wrapper p.error {
color: #bc3b3b;
display: none;
#aspireupdate-log-viewer .inner .number::before {
content: counter(line);
}

#aspireupdate-log-viewer .inner .content {
white-space: pre-wrap;
word-break: break-all;
margin: 0;
flex: 1;
}

#voltron {
color: transparent;
font-size: 8px;
font-size: clamp(4px, 0.9vw, 8px);
line-height: 6px;
display: inline-block;
cursor: default;
Expand All @@ -140,11 +190,19 @@
}

@keyframes blink {

0%,
100% {
color: inherit;
}

50% {
color: transparent;
}
}

@media only screen and (max-width: 576px) {
#voltron {
display: none;
}
}
Loading

0 comments on commit 79b36a3

Please sign in to comment.