jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

user upgrades: update upgrade landing page.

Browse Source 
* Add a frequently asked questions section.
* Add nicer looking upgrade buttons.
* Format the page nicer.
* Prevent users from attempting invalid upgrades on users that are
  already Platinum or above.
This commit is contained in:
evazion
2020-12-25 00:27:08 -06:00
parent 058d71aa30
commit 069231a33b
9 changed files with 283 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/src/styles/base/020_base.scss
View File

@@ -118,6 +118,17 @@ table tfoot {
margin-top: 2em;
}
details {
border-bottom: 1px solid var(--details-border);
summary {
cursor: pointer;
user-select: none;
outline: none;
line-height: 2em;
}
}
.fineprint {
color: var(--muted-text-color);
font-style: italic;

18
app/javascript/src/styles/base/040_colors.css
View File

@@ -35,9 +35,12 @@
--quick-search-form-background: var(--body-background-color);
--user-upgrade-basic-background-color: #F5F5FF;
--user-upgrade-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE;
--user-upgrade-table-row-hover-background-color: #FEF;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: hsl(213, 100%, 40%);
--table-header-border: 2px solid #666;
--table-row-border: 1px solid #CCC;
@@ -72,6 +75,8 @@
--comment-sticky-background-color: var(--subnav-menu-background-color);
--details-border: #DDD;
--post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
@@ -157,7 +162,8 @@
--bulk-update-request-failed-color: red;
--login-link-color: #E00;
--footer-border: 1px solid #EEE;
--footer-border: 1px solid #DDD;
--details-border: #DDD;
--jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color);
@@ -255,6 +261,7 @@ body[data-current-user-theme="dark"] {
--subnav-menu-background-color: var(--grey-2);
--responsive-menu-background-color: var(--grey-3);
--footer-border: 1px solid var(--grey-3);
--details-border: var(--grey-3);
--table-header-border: 2px solid var(--grey-3);
--table-even-row-background: var(--grey-2);
@@ -419,9 +426,12 @@ body[data-current-user-theme="dark"] {
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--user-upgrade-gold-background-color: var(--yellow-0);
--user-upgrade-basic-background-color: var(--grey-2);
--user-upgrade-gold-background-color: var(--indigo-0);
--user-upgrade-platinum-background-color: var(--blue-0);
--user-upgrade-table-row-hover-background-color: transparent;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: var(--link-hover-color);
--wiki-page-other-name-background-color: var(--grey-3);
--wiki-page-versions-diff-del-background: var(--red-0);

83
app/javascript/src/styles/specific/user_upgrades.scss
View File

@@ -1,43 +1,66 @@
div#c-user-upgrades {
div#a-new {
form.stripe {
display: inline;
}
margin: 0 auto;
div.section {
margin-bottom: 2em;
}
div#feature-comparison {
overflow: hidden;
* {
margin-bottom: 1em;
}
table {
width: 100%;
h1 {
text-align: center;
}
colgroup {
width: 10em;
}
.login-button, form.button_to input[type="submit"] {
display: inline-block;
colgroup#gold {
background-color: var(--user-upgrade-gold-background-color);
}
color: var(--user-upgrade-button-text-color);
background-color: var(--user-upgrade-button-background-color);
colgroup#platinum {
background-color: var(--user-upgrade-platinum-background-color);
}
border: none;
border-radius: 4px;
padding: 0.75em;
td, th {
text-align: center;
vertical-align: top;
padding: 0.5em 0;
}
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
tbody {
tr:hover {
background-color: var(--user-upgrade-table-row-hover-background-color);
}
}
&:hover:not([disabled]) {
background-color: var(--user-upgrade-button-hover-background-color);
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)
}
&[disabled] {
background-color: grey;
cursor: default;
}
}
table#feature-comparison {
width: 100%;
th {
font-weight: bold;
}
colgroup {
width: 10em;
}
colgroup#basic {
background-color: var(--user-upgrade-basic-background-color);
}
colgroup#gold {
background-color: var(--user-upgrade-gold-background-color);
}
colgroup#platinum {
background-color: var(--user-upgrade-platinum-background-color);
}
td, th {
text-align: center;
vertical-align: top;
padding: 0.5em 0;
}
}
}