DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Improved network and site layout and design.

This commit is contained in:
ThePendulum 2020-01-05 03:27:26 +01:00
parent b26e199d94
commit a94edca073
3 changed files with 62 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/components/networks/network.vue
View File

@ -8,6 +8,7 @@
<div class="network">
<div class="sidebar">
<a
v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url"
target="_blank"
rel="noopener noreferrer"
@ -32,6 +33,7 @@
<div class="header">
<a
v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url"
target="_blank"
rel="noopener noreferrer"
@ -45,35 +47,13 @@
</div>
<div class="content-inner">
<div
v-if="sites.length"
class="compact"
>
<span
v-if="expanded"
class="expand"
@click="expanded = false"
>⇱ collapse</span>
<Sites
v-if="sites.length"
:sites="sites"
class="compact"
:class="{ expanded }"
/>
<span
v-if="!expanded"
class="expand"
@click="expanded = true"
>expand ⇲</span>
<span
v-if="expanded"
class="expand"
@click="expanded = false"
>⇱ collapse</span>
</div>
<Releases :releases="releases" />
</div>
</div>
@ -174,8 +154,7 @@ export default {
object-fit: contain;
box-sizing: border-box;
padding: 1rem;
margin: 0;
filter: $logo-shadow;
filter: $logo-highlight;
}
.header {

61
assets/components/sites/site.vue
View File

@ -8,35 +8,32 @@
<div class="header">
<a
v-if="site.url"
v-tooltip.bottom="`Go to ${site.url}`"
:href="site.url"
target="_blank"
rel="noopener noreferrer"
class="title"
class="link link-site"
>
<img
:src="`/img/logos/${site.network.slug}/${site.slug}.png`"
:title="site.name"
:alt="site.name"
class="logo"
class="logo logo-site"
>
</a>
<span class="link">
<span class="networklogo-container">
Part of
<a
v-tooltip.bottom="`Go to ${site.network.name} overview`"
:href="`/network/${site.network.slug}`"
class="networklogo-link"
class="link link-network"
>
<img
:src="`/img/logos/${site.network.slug}/network.png`"
:title="site.network.name"
:alt="site.network.name"
class="logo"
class="logo logo-network"
>
</a>
</span>
</span>
</div>
<div class="content-inner">
@ -84,49 +81,37 @@ export default {
.header {
background: $profile;
color: $text-contrast;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: solid 1px $shadow-weak;
}
.title {
padding: 1rem;
}
.heading {
padding: 0;
margin: 0 0 1rem 0;
}
.link {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: flex-end;
padding: 1rem;
}
.link-site {
margin: 0 1rem 0 0;
justify-content: flex-start;
}
.logo {
width: 20rem;
max-height: 6rem;
width: 100%;
max-width: 15rem;
max-height: 5rem;
object-fit: contain;
margin: 0 .5rem 1rem 0;
object-position: 0 0;
filter: $logo-highlight;
}
.networklogo-container {
display: flex;
align-items: center;
@media(max-width: $breakpoint) {
.link {
padding: .5rem 1rem;
}
.sites,
.scenes {
display: grid;
grid-gap: 1rem;
margin: 0 0 1rem 0;
.logo {
max-height: 2.5rem;
}
.sites {
grid-template-columns: repeat(auto-fit, 15rem);
}
</style>

56
public/css/style.css
View File

@ -521,53 +521,40 @@
/* $primary: #ff886c; */
.header[data-v-194630f6] {
background: #222;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.title[data-v-194630f6] {
padding: 1rem;
}
.heading[data-v-194630f6] {
padding: 0;
margin: 0 0 1rem 0;
}
.link[data-v-194630f6] {
display: -webkit-box;
display: flex;
flex-shrink: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: end;
align-items: flex-end;
padding: 1rem;
}
.link-site[data-v-194630f6] {
margin: 0 1rem 0 0;
-webkit-box-pack: start;
justify-content: flex-start;
}
.logo[data-v-194630f6] {
width: 20rem;
max-height: 6rem;
width: 100%;
max-width: 15rem;
max-height: 5rem;
-o-object-fit: contain;
object-fit: contain;
margin: 0 .5rem 1rem 0;
-o-object-position: 0 0;
object-position: 0 0;
-webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
}
.networklogo-container[data-v-194630f6] {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
@media (max-width: 720px) {
.link[data-v-194630f6] {
padding: .5rem 1rem;
}
.sites[data-v-194630f6],
.scenes[data-v-194630f6] {
display: grid;
grid-gap: 1rem;
margin: 0 0 1rem 0;
.logo[data-v-194630f6] {
max-height: 2.5rem;
}
.sites[data-v-194630f6] {
grid-template-columns: repeat(auto-fit, 15rem);
}
/* $primary: #ff886c; */
@ -693,9 +680,8 @@
object-fit: contain;
box-sizing: border-box;
padding: 1rem;
margin: 0;
-webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
-webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
}
.header[data-v-e2e12602] {
background: #222;