Skip to content
GitLab
Commit 4a2990c6 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth
Browse files

Implement cards

parent 31da8a16
Pipeline #24636 passed with stages
in 46 seconds
Hide whitespace changes
Inline Side-by-side
.gitlab-ci.yml
View file @ 4a2990c6
......@@ -31,6 +31,9 @@ build_preview:
artifacts:
paths:
- dist
environment:
name: preview/$CI_COMMIT_REF_NAME
url: http://$CI_PROJECT_NAMESPACE.pages.funkwhale.audio/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/dist/index.html
package:
image: node:16
......
index.html
View file @ 4a2990c6
......@@ -10,7 +10,16 @@
body {
text-align: center;
margin-bottom: 50px;
margin-bottom: 50px !important;
}
div.funkwhale, a.funkwhale, p.funkwhale {
margin: auto;
}
div.row {
display: flex;
justify-content: space-around;
}
/*Hide the overlay box and position it at the top of the page*/
......@@ -36,6 +45,7 @@
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
text-align: left;
}
/*Make sure the overlay's close button appears on the right hand side*/
......@@ -186,12 +196,171 @@
<img
alt=""
class="funkwhale image is-rounded"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Circle-icons-megaphone.svg/512px-Circle-icons-megaphone.svg.png"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png"
/>
<span>Break the bans</span>
</a>
</span>
</div>
</div>
<div id="cards">
<h2>Cards</h2>
<div class="benefits">
<h3>Benefits</h3>
<span class="show-code">
<div class="funkwhale benefit-card">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png">
<p class="title">For music lovers</p>
<p>Access your personnal music collection from anywhere. Beeing
focused on the promotion of Free licensed content, Funkwhale sports
advanced sharing features.</p>
</div>
</span>
</div>
<div class="category">
<h3>Category Card</h3>
<span class="show-code">
<div class="funkwhale category-card">
<span>Example Translation</span>
</div>
</span>
</div>
<div class="link">
<h3>Link Card</h3>
<span class="show-code">
<a href="#" class="funkwhale link-card">
<p class="title">Frequently Asked Questions</p>
<p>You have a question about Funkwhale? Get a quick answer!</p>
</a>
</span>
</div>
<div class="cta">
<h3>CTA</h3>
<div class="row">
<span class="show-code">
<div class="funkwhale cta-card">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png">
<p class="title">WireTransfer</p>
<p>Make either punctual or recurring transfers to our bank account.</p>
<button class="funkwhale button">View account information</button>
</div>
</span>
<span class="show-code">
<div class="funkwhale cta-card">
<p class="title">WireTransfer</p>
<p>Make either punctual or recurring transfers to our bank account.</p>
<button class="funkwhale button">View account information</button>
</div>
</span>
</div>
</div>
<div class="audio">
<h3>Audio</h3>
<div class="row">
<span class="show-code">
<div class="funkwhale artist-card">
<div class="cover">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png">
</div>
<div class="play-button">
<button><i class="bi bi-play-fill"></i></button>
</div>
<div class="name">
<span>Relatively long artist name</span>
</div>
<div class="tag-container">
<a href="#" class="funkwhale tag">#Electro</a>
<a href="#" class="funkwhale tag">#Funk</a>
<a href="#" class="funkwhale tag">#Metal</a>
</div>
<div class="object-count">
4 albums
</div>
<div class="menu-dots">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</span>
<span class="show-code">
<div class="funkwhale album-card">
<div class="cover">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png">
</div>
<div class="play-button">
<button><i class="bi bi-play-fill"></i></button>
</div>
<div class="name">
<span>Relatively long album name</span>
</div>
<div class="creator">
Artist Name
</div>
<div class="object-count">
4 albums
</div>
<div class="menu-dots">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</span>
<span class="show-code">
<div class="funkwhale playlist-card">
<div class="cover">
<img src="https://www.misspompadour.de/media/72/a2/63/1635548504/misspompadour-rot-mit-chili-farbe-wand-ansicht.jpg">
<img src="https://www.conae.de/thumbs/120_3_etalbond_farbe_205_pacificblue.jpg">
<img src="https://images.obi.de/product/DE/1500x1500/600910_2.jpg">
<img src="https://www.misspompadour.de/media/5b/59/ec/1635547627/misspompadour-gelb-mit-zitrone-farbe-wand-ansicht.jpg">
</div>
<div class="play-button">
<button><i class="bi bi-play-fill"></i></button>
</div>
<div class="name">
<span>Relatively long playlist name</span>
</div>
<div class="creator">
by <a href="">@username</a>
</div>
<div class="object-count">
4 albums
</div>
<div class="menu-dots">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</span>
<span class="show-code">
<div class="funkwhale podcast-card">
<div class="cover">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/220px-Color_icon_blue.svg.png">
</div>
<div class="play-button">
<button><i class="bi bi-play-fill"></i></button>
</div>
<div class="name">
<span>Relatively long podcast name</span>
</div>
<div class="tag-container">
<a href="#" class="funkwhale tag">#Electro</a>
<a href="#" class="funkwhale tag">#Funk</a>
<a href="#" class="funkwhale tag">#Metal</a>
</div>
<div class="object-count">
4 albums
</div>
<div class="menu-dots">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</span>
</div>
</div>
</div>
<!--The code overlay-->
......@@ -259,11 +428,11 @@
function fixIndent(str) {
// Create a match function to search for empty space at the beginning of the line
let matches = str.match(/ +/g);
let matches = str.match(/[ \t]+/g);
// Find the number of spaces preceding the first line (line 0)
let initial = matches[0].length;
// Find all instances of a newline (\n) followed by the number of spaces preceding line 0 (initial). Do this globally (g)
let re = RegExp(`\n {${initial}}`, "g");
let re = RegExp(`\n[ \t]{${initial}}`, "g");
// Replace all instances of newlines followed by the number of spaces preceding line 0 with just a newline (\n)
return str.replace(re, "\n");
}
......
package.json
View file @ 4a2990c6
......@@ -25,6 +25,7 @@
"src/**/*"
],
"dependencies": {
"bootstrap-icons": "^1.8.3",
"normalize.css": "^8.0.1"
}
}
src/components/FunkwhaleButton.scss
View file @ 4a2990c6
@import "../colors";
@import "../inc/font";
@import "../inc/style";
.funkwhale.button {
background-color: transparent;
font-family: $font-main;
height: 34px;
line-height: 16px;
font-size: 1em;
padding: 8px;
border-radius: 8px;
border: 0;
border-radius: var(--border-radius);
border: 1px solid var(--grey-600);
color: var(--grey-600);
min-width: 136px;
font-weight: 900;
justify-content: center;
......@@ -34,6 +37,7 @@
// Primary Buttons
.funkwhale.button.is-primary {
border: 0;
background-color: var(--primary);
color: #fff;
......@@ -56,6 +60,7 @@
// Secondary Buttons
.funkwhale.button.is-secondary {
border: 0;
background-color: var(--grey-200);
&[disabled] {
......@@ -77,6 +82,7 @@
// Desctructive Buttons
.funkwhale.button.is-destructive {
border: 0;
background-color: var(--destructive);
color: #fff;
......
src/components/FunkwhaleCard.scss 0 → 100644
View file @ 4a2990c6
@import "../colors";
@import "../inc/font";
@import "../inc/style";
%card {
border-radius: var(--border-radius);
}
%documentation-card {
@extend %card;
box-shadow: 0 3px 12px 2px rgb(0 0 0 / 10%);
.title {
color: #000;
font-weight: bold;
font-size: 18px;
}
}
%audio-card {
@extend %card;
height: 320px;
width: 208px;
position: relative;
box-shadow: 0 3px 12px 2px rgb(0 0 0 / 20%);
.cover {
display: flex;
justify-content: center;
& img {
width: 100%;
}
}
& .name {
display: flex;
height: 1rem;
font-weight: bold;
font-size: 1rem;
margin: 16px 16px 6px;
text-align: left;
span {
align-self: flex-end;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
& .tag-container {
margin: 0 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
& .creator {
text-align: left;
margin-left: 16px;
margin-right: 16px;
line-height: 28px;
}
& .object-count {
text-align: left;
color: var(--grey-600);
margin: 12px 16px 0;
}
& .play-button {
display: none;
position: absolute;
right: 10px;
top: 154px;
&:hover {
right: 8px;
top: 152px;
}
& button {
padding-left: 6px;
font-size: 28px;
color: #605659;
border-radius: 50%;
background-color: #fff;
border: none;
width: 44px;
height: 44px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
&:hover {
font-size: 30px;
transition: font-size 100ms;
color: var(--blue-500);
width: 48px;
height: 48px;
}
}
}
&:hover .play-button {
display: block;
}
& .menu-dots {
display: none;
box-sizing: border-box;
position: absolute;
bottom: 10px;
right: 18px;
width: 28px;
height: 28px;
padding: 5px 0;
&:hover {
background-color: var(--grey-200);
border-radius: var(--border-radius);
}
}
&:hover .menu-dots {
display: block;
}
}
.funkwhale.cta-card {
@extend %documentation-card;
padding: 24px;
width: 320px;
box-sizing: border-box;
img {
width: 128px;
height: 128px;
border-radius: var(--border-radius);
}
.button {
margin-top: 32px;
width: 100%;
}
}
.funkwhale.benefit-card {
@extend %documentation-card;
height: 384px;
width: 280px;
padding: 20px;
box-sizing: border-box;
img {
max-width: 160px;
max-height: 160px;
border-radius: var(--border-radius);
margin: 10px 20px;
}
p {
margin-bottom: 30px;
}
}
.funkwhale.artist-card {
@extend %audio-card;
.cover img {
border-radius: 50%;
width: 192px;
}
}
.funkwhale.album-card {
@extend %audio-card;
.cover img {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
.funkwhale.podcast-card {
@extend %audio-card;
.cover img {
border-radius: var(--border-radius);
}
}
.funkwhale.playlist-card {
@extend %audio-card;
.cover {
flex-wrap: wrap;
img {
width: 50%;
}
img:first-child {
border-radius: var(--border-radius) 0 0;
}
img:nth-child(2) {
border-radius: 0 var(--border-radius) 0 0;
}
}
}
.funkwhale.category-card {
@extend %documentation-card;
width: 320px;
box-sizing: border-box;
font-size: 28px;
font-weight: 700;
padding: 20px;
height: 112px;
position: relative;
span {
bottom: 0;
left: 0;
position: absolute;
margin: 24px;
line-height: 36px;
width: 50%;
text-align: left;
margin-bottom: 18px;
}
}
.funkwhale.link-card {
@extend %documentation-card;
color: #000;
text-align: left;
text-decoration: none;
box-sizing: border-box;
display: block;
width: 320px;
padding: 20px;
position: relative;
height: 122px;
p {
bottom: 0;
left: 0;
position: absolute;
margin-left: 24px;
margin-bottom: 24px;
margin-top: 24px;
&.title {
bottom: auto;
margin-top: 10px;
}
}
}
src/components/FunkwhaleTag.scss
View file @ 4a2990c6
......@@ -40,6 +40,7 @@
vertical-align: middle;
img {
border-radius: 50%;
display: inline-block;
height: 100%;
margin-left: -0.75em;
......
src/components/index.scss
View file @ 4a2990c6
......@@ -2,3 +2,4 @@
@import "FunkwhaleButton";
@import "FunkwhaleInput";
@import "FunkwhaleTag";
@import "FunkwhaleCard";
src/inc/font.scss
View file @ 4a2990c6
@import url("/node_modules/bootstrap-icons/font/bootstrap-icons.css");
@font-face {
font-family: Lato;
src: url("/src/font/Lato-Black.ttf") format("truetype");
......
src/inc/style.scss 0 → 100644
View file @ 4a2990c6
* {
--border-radius: 8px;
}
yarn.lock
View file @ 4a2990c6
......@@ -126,6 +126,11 @@ binary-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
bootstrap-icons@^1.8.3:
version "1.8.3"
resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.8.3.tgz#14c15e26deaddd42af9f88c4d81f7c45bf26aa98"
integrity sha512-s5kmttnbq4BXbx3Bwnj39y+t7Vc3blTtyD77W3aYQ1LlNoS3lNbbGvSYhIbg26Im8KmjScyFpHEevlPOBcIDdA==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment