Ivan/commento
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard: use solid backgrounds and boxes

Browse Source
This commit is contained in:
Adhityaa Chandrasekar 2019-04-12 20:21:46 -04:00
parent 850dfc9712
commit 65ea597c08
3 changed files with 93 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/dashboard.html
View File

@ -355,39 +355,53 @@
<div id="danger-view" class="view hidden">
<div class="view-inside">
<div class="mid-view">
<div class="tabs-container">
<div class="tab">
<ul class="tabs">
<li class="tab-link original current" data-tab="danger-tab-1">Freeze Comments</li>
<li class="tab-link current" data-tab="danger-tab-2">Delete Domain</li>
</ul>
<div class="center center-title">
Danger Zone
</div>
<div id="danger-tab-1" class="content original current">
<div class="box" v-if="domains[cd].state == 'frozen'">
<div class="box-subtitle">
If you desire to re-allow comments again on your website, you can do so. You can, of course, freeze the site again in the future.
<div class="action-buttons-container">
<div class="action-buttons">
<div class="action-button" v-if="domains[cd].state != 'frozen'">
<div class="left">
<div class="title">
Freeze Domain
</div>
<div class="subtitle">
Freezing your domain will disable new comments and voting temporarily. You may unfreeze the domain later.
</div>
<button onclick="document.location.hash='#unfreeze-domain-modal'" class="button green-button">Unfreeze Domain</button>
</div>
<div class="box" v-if="domains[cd].state != 'frozen'">
<div class="box-subtitle">
If you desire to temporarily freeze new comments (domain-wide), thereby making it read-only, you can do so. You can choose to unfreeze later; this is temporary.
</div>
<button id="orange-button" onclick="document.location.hash='#freeze-domain-modal'" class="button orange-button">Freeze Domain</button>
<div class="right">
<button onclick="document.location.hash='#freeze-domain-modal'"
class="button orange-button">Freeze</button>
</div>
</div>
</div>
<div id="danger-tab-2" class="content">
<div class="box">
<div class="box-subtitle">
Want to completely remove Commento from your website? This will permanently delete all comments and there is literally no way to retrieve your data once you do this.
<div class="action-button" v-if="domains[cd].state == 'frozen'">
<div class="left">
<div class="title">
Unfreeze Domain
</div>
<div class="subtitle">
Unfreezing your domain will allow readers to create new comments and vote on comments again. You may re-freeze the domain later.
</div>
</div>
<div class="right">
<button onclick="document.location.hash='#unfreeze-domain-modal'"
class="button green-button">Unfreeze</button>
</div>
</div>
<div class="action-button">
<div class="left">
<div class="title">
Delete Domain
</div>
<div class="subtitle">
This will permanently delete all comments and all data associated with your domain. There is literally no way to retrieve your data once you do this. Please be certain.
</div>
</div>
<div class="right">
<button onclick="document.location.hash='#delete-domain-modal'"
class="button big-red-button">Delete</button>
</div>
<button id="big-red-button" class="button big-red-button" onclick="document.location.hash='#delete-domain-modal'">Delete Domain</button>
</div>
</div>
</div>

2
frontend/js/dashboard.js
View File

@ -59,7 +59,7 @@
{
"id": "danger",
"text": "Danger Zone",
"meaning": "Delete or freeze domain",
"meaning": "Here be dragons",
"selected": false,
"open": global.dangerOpen,
},

68
frontend/sass/dashboard-main.scss
View File

@ -30,9 +30,12 @@ body {
margin: 0px;
padding: 0px;
list-style: none;
border-bottom: 1px solid $gray-4;
border-bottom: 1px solid $gray-1;
li {
font-weight: bold;
color: $gray-7;
font-size: 14px;
background: none;
display: inline-block;
padding: 10px 15px;
@ -42,8 +45,14 @@ body {
}
li.current {
border-bottom: 1px solid $blue-6;
transition: all 0.1s;
background: $gray-1;
color: $blue-7;
}
li.current:hover {
background: $gray-1;
color: $blue-7;
}
}
@ -66,6 +75,38 @@ body {
}
}
.action-buttons-container {
.action-buttons {
.action-button {
padding: 8px 16px 8px 16px;
display: flex;
border: 1px solid $gray-2;
margin: 8px;
.left {
padding: 8px;
.title {
font-weight: bold;
color: $gray-7;
font-size: 14px;
}
.subtitle {
color: $gray-6;
font-size: 14px;
}
}
.right {
float: right;
height: 100%;
margin: auto;
}
}
}
}
@import "email-main.scss";
.mod-emails-container {
@ -240,7 +281,7 @@ body {
}
.setting-subtitle {
color: $gray-5;
color: $gray-6;
}
.super-setting {
@ -265,23 +306,17 @@ body {
.pane-setting:hover {
color: $gray-6;
-webkit-box-shadow: inset -2px 0px 0 -1px $gray-4;
-moz-box-shadow: inset -2px 0px 0 -1px $gray-4;
box-shadow: inset -2px 0px 0 -1px $gray-4;
background: $gray-1;
}
.selected {
color: $blue-6;
-webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
-moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
box-shadow: inset -2px 0px 0 -1px $blue-6;
color: $blue-7;
background: $gray-2;
}
.selected:hover {
color: $blue-7;
-webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
-moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
box-shadow: inset -2px 0px 0 -1px $blue-6;
background: $gray-2;
}
}
@ -626,12 +661,11 @@ foreignObject {
}
.red-button {
border: 1px solid $gray-3;
outline: none;
color: $red-8;
}
.red-button:hover {
border: 1px solid $red-6;
color: $red-7;
}
.green-button {
@ -647,7 +681,7 @@ foreignObject {
}
.orange-button {
color: $orange-7;
color: $orange-8;
}
.orange-button:hover {