hermes-agent/pinchflat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First UI Pass (#15)

Browse Source 
* 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
This commit is contained in:
Kieran
2024-02-08 11:03:11 -08:00
committed by GitHub
parent 013b2ccc21
commit 89497c4c6b
76 changed files with 1029 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+26
View File
@@ -2,4 +2,30 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './satoshi';
/* This file is for your main application CSS */
[x-cloak] {
display: none !important;
}
@layer base {
body {
@apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
}
}
@layer components {
}
@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
assets/css/satoshi.css
+102
View File
@@ -0,0 +1,102 @@
/**
* @license
*
* Font Family: Satoshi
* Designed by: Deni Anggara
* URL: https://www.fontshare.com/fonts/satoshi
* © 2023 Indian Type Foundry
*
* Font Styles:
* Satoshi Light
* Satoshi Light Italic
* Satoshi Regular
* Satoshi Italic
* Satoshi Medium
* Satoshi Medium Italic
* Satoshi Bold
* Satoshi Bold Italic
* Satoshi Black
* Satoshi Black Italic
*
*/
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'),
url('/fonts/satoshi/Satoshi-Light.ttf');
font-weight: 300;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf');
font-weight: 300;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'),
url('/fonts/satoshi/Satoshi-Regular.ttf');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'),
url('/fonts/satoshi/Satoshi-Italic.ttf');
font-weight: 400;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'),
url('/fonts/satoshi/Satoshi-Medium.ttf');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
font-weight: 500;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'),
url('/fonts/satoshi/Satoshi-Bold.ttf');
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
font-weight: 700;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
font-weight: 900;
font-display: swap;
font-style: italic;
}
assets/js/app.js
+12 -1
View File
@@ -21,10 +21,21 @@ import 'phoenix_html'
import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar'
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
let liveSocket = new LiveSocket('/live', Socket, {
params: { _csrf_token: csrfToken }
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})
// Show progress bar on live navigation and form submits
assets/package.json
+4 -1
View File
@@ -1,3 +1,6 @@
{
"description": "Use this one for actual JS deps used in-app"
"description": "Use this one for actual JS deps used in-app",
"dependencies": {
"alpinejs": "^3.13.5"
}
}
assets/tailwind.config.js
+274 -1
View File
@@ -2,15 +2,288 @@
// https://tailwindcss.com/docs/configuration
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
const fs = require('fs')
const path = require('path')
module.exports = {
content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'],
darkMode: 'class',
theme: {
fontFamily: {
satoshi: ['Satoshi', 'sans-serif']
},
screens: {
'2xsm': '375px',
xsm: '425px',
'3xl': '2000px',
...defaultTheme.screens
},
extend: {
colors: {
brand: '#FD4F00'
current: 'currentColor',
transparent: 'transparent',
white: '#FFFFFF',
black: '#1C2434',
'black-2': '#010101',
body: '#64748B',
bodydark: '#AEB7C0',
bodydark1: '#DEE4EE',
bodydark2: '#8A99AF',
primary: '#3C50E0',
secondary: '#80CAEE',
stroke: '#E2E8F0',
gray: '#EFF4FB',
graydark: '#333A48',
'gray-2': '#F7F9FC',
'gray-3': '#FAFAFA',
whiten: '#F1F5F9',
whiter: '#F5F7FD',
boxdark: '#24303F',
'boxdark-2': '#1A222C',
strokedark: '#2E3A47',
'form-strokedark': '#3d4d60',
'form-input': '#1d2a39',
'meta-1': '#DC3545',
'meta-2': '#EFF2F7',
'meta-3': '#10B981',
'meta-4': '#313D4A',
'meta-5': '#259AE6',
'meta-6': '#FFBA00',
'meta-7': '#FF6766',
'meta-8': '#F0950C',
'meta-9': '#E5E7EB',
success: '#219653',
danger: '#D34053',
warning: '#FFA70B'
},
fontSize: {
'title-xxl': ['44px', '55px'],
'title-xl': ['36px', '45px'],
'title-xl2': ['33px', '45px'],
'title-lg': ['28px', '35px'],
'title-md': ['24px', '30px'],
'title-md2': ['26px', '30px'],
'title-sm': ['20px', '26px'],
'title-xsm': ['18px', '24px']
},
spacing: {
4.5: '1.125rem',
5.5: '1.375rem',
6.5: '1.625rem',
7.5: '1.875rem',
8.5: '2.125rem',
9.5: '2.375rem',
10.5: '2.625rem',
11: '2.75rem',
11.5: '2.875rem',
12.5: '3.125rem',
13: '3.25rem',
13.5: '3.375rem',
14: '3.5rem',
14.5: '3.625rem',
15: '3.75rem',
15.5: '3.875rem',
16: '4rem',
16.5: '4.125rem',
17: '4.25rem',
17.5: '4.375rem',
18: '4.5rem',
18.5: '4.625rem',
19: '4.75rem',
19.5: '4.875rem',
21: '5.25rem',
21.5: '5.375rem',
22: '5.5rem',
22.5: '5.625rem',
24.5: '6.125rem',
25: '6.25rem',
25.5: '6.375rem',
26: '6.5rem',
27: '6.75rem',
27.5: '6.875rem',
29: '7.25rem',
29.5: '7.375rem',
30: '7.5rem',
31: '7.75rem',
32.5: '8.125rem',
34: '8.5rem',
34.5: '8.625rem',
35: '8.75rem',
36.5: '9.125rem',
37.5: '9.375rem',
39: '9.75rem',
39.5: '9.875rem',
40: '10rem',
42.5: '10.625rem',
44: '11rem',
45: '11.25rem',
46: '11.5rem',
47.5: '11.875rem',
49: '12.25rem',
50: '12.5rem',
52: '13rem',
52.5: '13.125rem',
54: '13.5rem',
54.5: '13.625rem',
55: '13.75rem',
55.5: '13.875rem',
59: '14.75rem',
60: '15rem',
62.5: '15.625rem',
65: '16.25rem',
67: '16.75rem',
67.5: '16.875rem',
70: '17.5rem',
72.5: '18.125rem',
73: '18.25rem',
75: '18.75rem',
90: '22.5rem',
94: '23.5rem',
95: '23.75rem',
100: '25rem',
115: '28.75rem',
125: '31.25rem',
132.5: '33.125rem',
150: '37.5rem',
171.5: '42.875rem',
180: '45rem',
187.5: '46.875rem',
203: '50.75rem',
230: '57.5rem',
242.5: '60.625rem'
},
maxWidth: {
2.5: '0.625rem',
3: '0.75rem',
4: '1rem',
11: '2.75rem',
13: '3.25rem',
14: '3.5rem',
15: '3.75rem',
22.5: '5.625rem',
25: '6.25rem',
30: '7.5rem',
34: '8.5rem',
35: '8.75rem',
40: '10rem',
42.5: '10.625rem',
44: '11rem',
45: '11.25rem',
60: '15rem',
70: '17.5rem',
90: '22.5rem',
94: '23.5rem',
125: '31.25rem',
132.5: '33.125rem',
142.5: '35.625rem',
150: '37.5rem',
180: '45rem',
203: '50.75rem',
230: '57.5rem',
242.5: '60.625rem',
270: '67.5rem',
280: '70rem',
292.5: '73.125rem'
},
maxHeight: {
35: '8.75rem',
70: '17.5rem',
90: '22.5rem',
550: '34.375rem',
300: '18.75rem'
},
minWidth: {
22.5: '5.625rem',
42.5: '10.625rem',
47.5: '11.875rem',
75: '18.75rem'
},
zIndex: {
999999: '999999',
99999: '99999',
9999: '9999',
999: '999',
99: '99',
9: '9',
1: '1'
},
opacity: {
65: '.65'
},
transitionProperty: { width: 'width', stroke: 'stroke' },
borderWidth: {
6: '6px'
},
boxShadow: {
default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
switcher:
'0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)'
},
dropShadow: {
1: '0px 1px 0px #E2E8F0',
2: '0px 1px 4px rgba(0, 0, 0, 0.12)'
},
keyframes: {
linspin: {
'100%': { transform: 'rotate(360deg)' }
},
easespin: {
'12.5%': { transform: 'rotate(135deg)' },
'25%': { transform: 'rotate(270deg)' },
'37.5%': { transform: 'rotate(405deg)' },
'50%': { transform: 'rotate(540deg)' },
'62.5%': { transform: 'rotate(675deg)' },
'75%': { transform: 'rotate(810deg)' },
'87.5%': { transform: 'rotate(945deg)' },
'100%': { transform: 'rotate(1080deg)' }
},
'left-spin': {
'0%': { transform: 'rotate(130deg)' },
'50%': { transform: 'rotate(-5deg)' },
'100%': { transform: 'rotate(130deg)' }
},
'right-spin': {
'0%': { transform: 'rotate(-130deg)' },
'50%': { transform: 'rotate(5deg)' },
'100%': { transform: 'rotate(-130deg)' }
},
rotating: {
'0%, 100%': { transform: 'rotate(360deg)' },
'50%': { transform: 'rotate(0deg)' }
},
topbottom: {
'0%, 100%': { transform: 'translate3d(0, -100%, 0)' },
'50%': { transform: 'translate3d(0, 0, 0)' }
},
bottomtop: {
'0%, 100%': { transform: 'translate3d(0, 0, 0)' },
'50%': { transform: 'translate3d(0, -100%, 0)' }
}
},
animation: {
linspin: 'linspin 1568.2353ms linear infinite',
easespin: 'easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
'left-spin': 'left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
'right-spin': 'right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
rotating: 'rotating 30s linear infinite',
topbottom: 'topbottom 60s infinite alternate linear',
bottomtop: 'bottomtop 60s infinite alternate linear',
'spin-1.5': 'spin 1.5s linear infinite',
'spin-2': 'spin 2s linear infinite',
'spin-3': 'spin 3s linear infinite'
}
}
},
assets/yarn.lock
+18
View File
@@ -2,3 +2,21 @@
# yarn lockfile v1
"@vue/reactivity@~3.1.1":
version "3.1.5"
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991"
integrity sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==
dependencies:
"@vue/shared" "3.1.5"
"@vue/shared@3.1.5":
version "3.1.5"
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==
alpinejs@^3.13.5:
version "3.13.5"
resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.13.5.tgz#c06f067e847a295085b4c6f76c42a6a35499d953"
integrity sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==
dependencies:
"@vue/reactivity" "~3.1.1"