finalise card layout, toast css, tooltip css
This commit is contained in:
@@ -22,19 +22,23 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="cardInnerInfoButtons">
|
||||
<g-link to="/" v-if="external">
|
||||
<g-link :to="`${external}`" v-if="external">
|
||||
<i class="fas fa-link" />
|
||||
</g-link>
|
||||
<g-link to="/" v-if="steam">
|
||||
<g-link :to="`${steam}`" v-if="steam">
|
||||
<i class="fab fa-steam" />
|
||||
</g-link>
|
||||
<g-link to="/" v-if="github">
|
||||
<g-link :to="`${github}`" v-if="github">
|
||||
<i class="fab fa-github"></i>
|
||||
</g-link>
|
||||
<g-link to="/" v-if="facebook">
|
||||
<g-link :to="`${facebook}`" v-if="facebook">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</g-link>
|
||||
<g-link to="/" v-if="discord">
|
||||
<g-link
|
||||
to="/"
|
||||
v-if="discord"
|
||||
v-tooltip="`Kliknij by skopiować do schowka!`"
|
||||
>
|
||||
<i class="fab fa-discord" />
|
||||
{{ discord }}
|
||||
</g-link>
|
||||
@@ -58,6 +62,16 @@ export default {
|
||||
facebook: String,
|
||||
discord: String,
|
||||
},
|
||||
methods: {
|
||||
copyDiscord: function() {
|
||||
// this.$copyText(discord);
|
||||
this.$toasted.show(`Skopiowano do schowka!`, {
|
||||
duration: 2000,
|
||||
className: 'toastcss',
|
||||
icon: 'check',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -89,6 +103,9 @@ export default {
|
||||
.cardInnerInfo {
|
||||
padding: 0.8rem;
|
||||
padding-top: 0.6rem;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.cardInnerInfoTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -117,9 +134,11 @@ export default {
|
||||
.cardInnerInfoButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
align-items: baseline;
|
||||
margin-top: 0.6rem;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
// margin-top: 0.6rem;
|
||||
a {
|
||||
color: var(--graytext);
|
||||
text-decoration: inherit;
|
||||
|
||||
@@ -4,6 +4,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteName
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
|
||||
@@ -46,10 +54,109 @@ html {
|
||||
}
|
||||
</style>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteName
|
||||
}
|
||||
<style lang="scss">
|
||||
// TOAST STYLING
|
||||
.toastcss {
|
||||
background-color: var(--gray) !important;
|
||||
border-left: 4px solid var(--red);
|
||||
border-bottom: 3px solid;
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(
|
||||
90deg,
|
||||
rgba(251, 99, 107, 1) 0%,
|
||||
rgba(97, 242, 234, 1) 100%
|
||||
);
|
||||
}
|
||||
</static-query>
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// TOOLTIP STYLING
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
.tooltip-inner {
|
||||
background: var(--gray);
|
||||
box-shadow: 0 6px 18px black;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px 4px;
|
||||
border-bottom: 3px solid;
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(
|
||||
90deg,
|
||||
rgba(251, 99, 107, 1) 0%,
|
||||
rgba(97, 242, 234, 1) 100%
|
||||
);
|
||||
}
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: #aeabab;
|
||||
z-index: 1;
|
||||
}
|
||||
&[x-placement^='top'] {
|
||||
margin-bottom: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^='bottom'] {
|
||||
margin-top: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^='right'] {
|
||||
margin-left: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^='left'] {
|
||||
margin-right: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
}
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</g-link>
|
||||
<p style="text-align: center">
|
||||
Strona w trakcie rewrite-u! Zapraszamy później.
|
||||
Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać.
|
||||
</p>
|
||||
<div class="header-buttons">
|
||||
<g-link to="/discord">Discord</g-link>
|
||||
@@ -54,11 +54,11 @@
|
||||
name="Jakub Mańczak"
|
||||
nickname="jamesen"
|
||||
photo="01"
|
||||
description="Wykonywacz zadań, pisacz kodu, rysownik grafik, zarządca."
|
||||
external="true"
|
||||
steam="true"
|
||||
facebook="true"
|
||||
github="true"
|
||||
description="Przywódca bez jakichkolwiek umiejętności przewodniczych."
|
||||
external="/jamesen-external"
|
||||
steam="/jamesen-steam"
|
||||
facebook="/jamesen-facebook"
|
||||
github="/jamesen-github"
|
||||
discord="j4mesen#1429"
|
||||
/>
|
||||
<Card
|
||||
@@ -66,27 +66,32 @@
|
||||
tabindex="0"
|
||||
name="Olek Kulka"
|
||||
nickname="KuOlek"
|
||||
description="Reprezentant medialny."
|
||||
photo="02"
|
||||
description="Reprezentant medialny w obliczu braku zainteresowanych mediów."
|
||||
discord="KuOlek#8433"
|
||||
/>
|
||||
<Card
|
||||
id="adam"
|
||||
tabindex="0"
|
||||
name="Adam Cała"
|
||||
nickname="Be Elephant"
|
||||
description=""
|
||||
photo="03"
|
||||
description="Legenda głosi że płonące strzały w powietrzu zwiastują słonia."
|
||||
/>
|
||||
<Card
|
||||
id="mollin"
|
||||
tabindex="0"
|
||||
name="Jakub Mollin"
|
||||
nickname="Mollin"
|
||||
description=""
|
||||
photo="04"
|
||||
description="Kandydat do artykułu pt. 'Śmierć z roześmiania' na Wikipedii."
|
||||
/>
|
||||
<Card
|
||||
id="franek"
|
||||
tabindex="0"
|
||||
name="Franek Cała"
|
||||
nickname="Bavil Gravlax"
|
||||
photo="05"
|
||||
description="Pełnoprawny członek tajemnego społeczeństwa kocyków."
|
||||
/>
|
||||
<Card name="... ?" />
|
||||
|
||||
Reference in New Issue
Block a user