Added SteamAPI and achievement searching
This commit is contained in:
parent
b229ff9a15
commit
627cc810ed
GPG key ID:
0989A73D8C421174
61 changed files with 2781 additions and 903 deletions
|
|
@ -70,6 +70,15 @@ html, body {
|
|||
background-color: var(--accent-value3);
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
from { transform: rotateZ(0deg ); }
|
||||
to { transform: rotateZ(360deg); }
|
||||
}
|
||||
|
||||
.ap-loading {
|
||||
animation: 1.5s cubic-bezier(0.4, 0.15, 0.6, 0.85) 0s infinite running load;
|
||||
}
|
||||
|
||||
.ap-button {
|
||||
color: var(--foreground);
|
||||
background-color: var(--accent-value2);
|
||||
|
|
@ -226,201 +235,3 @@ html, body {
|
|||
|
||||
background-color: var(--accent-value3);
|
||||
}
|
||||
|
||||
.list-page-search {
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-page-search > label,
|
||||
.list-page-search > input {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 20px;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-page-search > label {
|
||||
background-color: var(--accent-value2);
|
||||
}
|
||||
|
||||
.list-page-search > label:hover {
|
||||
background-color: var(--accent-value3);
|
||||
}
|
||||
|
||||
.list-page-search > label:active {
|
||||
background-color: var(--accent-value1);
|
||||
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.list-page-search > input {
|
||||
background-color: var(--distinction);
|
||||
|
||||
border: 0;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
outline: none;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.075s;
|
||||
}
|
||||
|
||||
.list-page-search > input:focus {
|
||||
background-color: var(--foreground);
|
||||
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.list-page-partitions {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.list-page-filter-partition {
|
||||
width: 20%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.list-page-filter-chunk {
|
||||
background-color: var(--distinction);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list-page-filter {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-page-filter-checkbox {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
background-color: var(--foreground);
|
||||
|
||||
border: 3px solid var(--foreground);
|
||||
border-radius: 8px;
|
||||
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.list-page-filter:hover > .list-page-filter-checkbox {
|
||||
background-color: var(--foreground);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter.selected > .list-page-filter-checkbox {
|
||||
background-color: var(--selected-accent1);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter.selected:hover > .list-page-filter-checkbox {
|
||||
background-color: var(--selected-accent0);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter-name {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.list-page-list-partition {
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.list-page-list {
|
||||
border-radius: 8px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-page-header {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
|
||||
background-color: var(--accent-value2);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--foreground);
|
||||
font-size: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-page-entry {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
|
||||
background-color: var(--distinction);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--foreground);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-page-entry-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.list-page-entry-text {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
border-top: 1px solid var(--background);
|
||||
}
|
||||
|
||||
.list-page-header > .list-page-entry-text {
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,111 +0,0 @@
|
|||
#index-page {
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
#list-page-search-filters {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#list-page-search-dropdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#list-page-search-pair {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#filter-dropdown-wrapper {
|
||||
box-sizing: border-box;
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack.active {
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
|
||||
#filter-dropdown-button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack:hover > #filter-dropdown-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filter-dropdown-button-hover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack:hover > #filter-dropdown-button-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#list-page-filters-flex {
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#list-page-filters-flex.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-page-filter-section {
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#list-page-filters-background {
|
||||
background-color: var(--distinction);
|
||||
}
|
||||
|
||||
.list-page-entry-text.achievement-name {
|
||||
flex-grow: 3;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.list-page-entry-text.achievement-description {
|
||||
flex-grow: 6;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.list-page-entry-text.achievement-stages {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
--form-spacing: 48px;
|
||||
|
||||
--element-spacing: 12px;
|
||||
|
||||
--error: #F95959;
|
||||
}
|
||||
|
||||
#login-page {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,26 @@
|
|||
max-width: 1600px;
|
||||
}
|
||||
|
||||
#importing {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#importing-text {
|
||||
margin: 0;
|
||||
height: 96px;
|
||||
font-size: 64px;
|
||||
line-height: 96px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#importing-loading {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.profile-list {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
|
@ -150,7 +170,7 @@
|
|||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
|
||||
background-color: var(--background);
|
||||
background-color: var(--background-dark);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -178,7 +198,7 @@
|
|||
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: var(--background);
|
||||
background-color: var(--background-dark);
|
||||
opacity: 0.8;
|
||||
|
||||
display: block;
|
||||
|
|
|
|||
330
frontend/webpage/static/styles/search.css
Normal file
330
frontend/webpage/static/styles/search.css
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
#list-page-search-filters {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#list-page-search-dropdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#list-page-search-pair {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#filter-dropdown-wrapper {
|
||||
box-sizing: border-box;
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack.active {
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
|
||||
#filter-dropdown-button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack:hover > #filter-dropdown-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filter-dropdown-button-hover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filter-dropdown-stack:hover > #filter-dropdown-button-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#list-page-filters-flex {
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#list-page-filters-flex.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-page-filter-section {
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-basis: max-content;
|
||||
flex-grow: 1;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-page-filter-partition {
|
||||
width: 20%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.list-page-filter-chunk {
|
||||
background-color: var(--distinction);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list-page-filter {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-page-filter-checkbox {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
background-color: var(--foreground);
|
||||
|
||||
border: 3px solid var(--foreground);
|
||||
border-radius: 8px;
|
||||
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.list-page-filter:hover > .list-page-filter-checkbox {
|
||||
background-color: var(--foreground);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter.selected > .list-page-filter-checkbox {
|
||||
background-color: var(--selected-accent1);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter.selected:hover > .list-page-filter-checkbox {
|
||||
background-color: var(--selected-accent0);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
.list-page-filter-name,
|
||||
.list-page-filter-label {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.list-page-filter-label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.list-page-filter-param {
|
||||
padding: 4px;
|
||||
width: 25%;
|
||||
|
||||
font-size: 24px;
|
||||
color: var(--background);
|
||||
background-color: var(--foreground);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#list-page-filters-background {
|
||||
background-color: var(--distinction);
|
||||
}
|
||||
|
||||
.list-page-entry-text {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.page.search {
|
||||
max-width: 1720px;
|
||||
}
|
||||
|
||||
.list-page-search {
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-page-search > label,
|
||||
.list-page-search > input {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 20px;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-page-search > label {
|
||||
background-color: var(--accent-value2);
|
||||
}
|
||||
|
||||
.list-page-search > label:hover {
|
||||
background-color: var(--accent-value3);
|
||||
}
|
||||
|
||||
.list-page-search > label:active {
|
||||
background-color: var(--accent-value1);
|
||||
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.list-page-search > input {
|
||||
background-color: var(--distinction);
|
||||
|
||||
border: 0;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
outline: none;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.075s;
|
||||
}
|
||||
|
||||
.list-page-search > input:focus {
|
||||
background-color: var(--foreground);
|
||||
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.list-page-partitions {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.list-page-list-partition {
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.list-page-list {
|
||||
border-radius: 8px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-page-header {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
|
||||
background-color: var(--accent-value2);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--foreground);
|
||||
font-size: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-page-entry {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
|
||||
background-color: var(--distinction);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--foreground);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.list-page-entry-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.list-page-entry-text {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-page-entry > .list-page-entry-text {
|
||||
border-top: 1px solid var(--background);
|
||||
border-left: 1px solid var(--background);
|
||||
}
|
||||
|
||||
.list-page-header > .list-page-entry-text {
|
||||
border-left: 1px solid var(--accent-value0);
|
||||
}
|
||||
|
||||
#loading-results {
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
|
||||
display: none;
|
||||
}
|
||||
5
frontend/webpage/static/styles/search_achievements.css
Normal file
5
frontend/webpage/static/styles/search_achievements.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.list-page-entry-text.achievement-game-name { flex-grow: 1.75; }
|
||||
.list-page-entry-text.achievement-name { flex-grow: 2; }
|
||||
.list-page-entry-text.achievement-completion { flex-grow: 1; }
|
||||
.list-page-entry-text.achievement-quality { flex-grow: 1; }
|
||||
.list-page-entry-text.achievement-difficulty { flex-grow: 1; }
|
||||
|
|
@ -18,4 +18,6 @@
|
|||
|
||||
--selected-accent0: #2266CC;
|
||||
--selected-accent1: #3388FF;
|
||||
|
||||
--error: #F95959;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue