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

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;
}
}
}