Skip to content

Commit 89497c4

Browse files
kieraneglinkieraneglin
authored
First UI Pass (#15)
* Added scratchpad dir * Installed Alpine * [WIP] began integrating Tailwind and accompanying theme * [WIP] Set up basic views for sources * Adds new UI to media profiles page * Removes unneeded view
1 parent 013b2cc commit 89497c4

File tree

76 files changed

+1029
-297
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1029
-297
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,4 @@ npm-debug.log
4040
.env
4141
.DS_Store
4242
scratchpad.md
43+
/scratchpad/

‎assets/css/app.css

+26
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,30 @@
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
44

5+
@import './satoshi';
6+
57
/* This file is for your main application CSS */
8+
[x-cloak] {
9+
display: none !important;
10+
}
11+
12+
@layer base {
13+
body {
14+
@apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
15+
}
16+
}
17+
18+
@layer components {
19+
}
20+
21+
@layer utilities {
22+
/* Chrome, Safari and Opera */
23+
.no-scrollbar::-webkit-scrollbar {
24+
display: none;
25+
}
26+
27+
.no-scrollbar {
28+
-ms-overflow-style: none; /* IE and Edge */
29+
scrollbar-width: none; /* Firefox */
30+
}
31+
}

‎assets/css/satoshi.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* @license
3+
*
4+
* Font Family: Satoshi
5+
* Designed by: Deni Anggara
6+
* URL: https://www.fontshare.com/fonts/satoshi
7+
* © 2023 Indian Type Foundry
8+
*
9+
* Font Styles:
10+
* Satoshi Light
11+
* Satoshi Light Italic
12+
* Satoshi Regular
13+
* Satoshi Italic
14+
* Satoshi Medium
15+
* Satoshi Medium Italic
16+
* Satoshi Bold
17+
* Satoshi Bold Italic
18+
* Satoshi Black
19+
* Satoshi Black Italic
20+
*
21+
*/
22+
23+
@font-face {
24+
font-family: 'Satoshi';
25+
src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'),
26+
url('/fonts/satoshi/Satoshi-Light.ttf');
27+
font-weight: 300;
28+
font-display: swap;
29+
font-style: normal;
30+
}
31+
32+
@font-face {
33+
font-family: 'Satoshi';
34+
src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
35+
url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf');
36+
font-weight: 300;
37+
font-display: swap;
38+
font-style: italic;
39+
}
40+
41+
@font-face {
42+
font-family: 'Satoshi';
43+
src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'),
44+
url('/fonts/satoshi/Satoshi-Regular.ttf');
45+
font-weight: 400;
46+
font-display: swap;
47+
font-style: normal;
48+
}
49+
50+
@font-face {
51+
font-family: 'Satoshi';
52+
src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'),
53+
url('/fonts/satoshi/Satoshi-Italic.ttf');
54+
font-weight: 400;
55+
font-display: swap;
56+
font-style: italic;
57+
}
58+
59+
@font-face {
60+
font-family: 'Satoshi';
61+
src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'),
62+
url('/fonts/satoshi/Satoshi-Medium.ttf');
63+
font-weight: 500;
64+
font-display: swap;
65+
font-style: normal;
66+
}
67+
68+
@font-face {
69+
font-family: 'Satoshi';
70+
src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
71+
url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
72+
font-weight: 500;
73+
font-display: swap;
74+
font-style: italic;
75+
}
76+
77+
@font-face {
78+
font-family: 'Satoshi';
79+
src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'),
80+
url('/fonts/satoshi/Satoshi-Bold.ttf');
81+
font-weight: 700;
82+
font-display: swap;
83+
font-style: normal;
84+
}
85+
86+
@font-face {
87+
font-family: 'Satoshi';
88+
src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
89+
url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
90+
font-weight: 700;
91+
font-display: swap;
92+
font-style: italic;
93+
}
94+
95+
@font-face {
96+
font-family: 'Satoshi';
97+
src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
98+
url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
99+
font-weight: 900;
100+
font-display: swap;
101+
font-style: italic;
102+
}

‎assets/js/app.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,21 @@ import 'phoenix_html'
2121
import { Socket } from 'phoenix'
2222
import { LiveSocket } from 'phoenix_live_view'
2323
import topbar from '../vendor/topbar'
24+
import Alpine from 'alpinejs'
25+
26+
window.Alpine = Alpine
27+
Alpine.start()
2428

2529
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
2630
let liveSocket = new LiveSocket('/live', Socket, {
27-
params: { _csrf_token: csrfToken }
31+
params: { _csrf_token: csrfToken },
32+
dom: {
33+
onBeforeElUpdated(from, to) {
34+
if (from._x_dataStack) {
35+
window.Alpine.clone(from, to)
36+
}
37+
}
38+
}
2839
})
2940

3041
// Show progress bar on live navigation and form submits

‎assets/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"description": "Use this one for actual JS deps used in-app"
2+
"description": "Use this one for actual JS deps used in-app",
3+
"dependencies": {
4+
"alpinejs": "^3.13.5"
5+
}
36
}

0 commit comments

Comments
 (0)