Responsive design updates
This commit is contained in:
parent
edc4c7a8e2
commit
461f1a40c0
24
cdrm-frontend/.gitignore
vendored
Normal file
24
cdrm-frontend/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
12
cdrm-frontend/README.md
Normal file
12
cdrm-frontend/README.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
33
cdrm-frontend/eslint.config.js
Normal file
33
cdrm-frontend/eslint.config.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
20
cdrm-frontend/index.html
Normal file
20
cdrm-frontend/index.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="w-full h-full">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favico.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="{{ data.description }}"/>
|
||||||
|
<meta name="keywords" content="{{ data.keywords }}"/>
|
||||||
|
<meta property='og:title' content="{{ data.opengraph_title }}" />
|
||||||
|
<meta property='og:description' content="{{ data.opengraph_description }}" />
|
||||||
|
<meta property='og:image' content="{{ data.opengraph_image }}" />
|
||||||
|
<meta property='og:url' content="{{ data.opengraph_url }}" />
|
||||||
|
<meta property='og:locale' content='en_US' />
|
||||||
|
<title>{{ data.tab_title }}</title>
|
||||||
|
</head>
|
||||||
|
<body class="w-full h-full">
|
||||||
|
<div id="root" class="w-full h-full"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
3260
cdrm-frontend/package-lock.json
generated
Normal file
3260
cdrm-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
cdrm-frontend/package.json
Normal file
29
cdrm-frontend/package.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "cdrm-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.1.4",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"tailwindcss": "^4.1.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.22.0",
|
||||||
|
"@types/react": "^19.0.10",
|
||||||
|
"@types/react-dom": "^19.0.4",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.22.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^16.0.0",
|
||||||
|
"vite": "^6.3.1"
|
||||||
|
}
|
||||||
|
}
|
BIN
cdrm-frontend/public/favico.png
Normal file
BIN
cdrm-frontend/public/favico.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 862 B |
BIN
cdrm-frontend/public/og-api.jpg
Normal file
BIN
cdrm-frontend/public/og-api.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 189 KiB |
BIN
cdrm-frontend/public/og-cache.jpg
Normal file
BIN
cdrm-frontend/public/og-cache.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 207 KiB |
BIN
cdrm-frontend/public/og-home.jpg
Normal file
BIN
cdrm-frontend/public/og-home.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 302 KiB |
BIN
cdrm-frontend/public/og-testplayer.jpg
Normal file
BIN
cdrm-frontend/public/og-testplayer.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 99 KiB |
20
cdrm-frontend/src/App.jsx
Normal file
20
cdrm-frontend/src/App.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import NavBarMain from "./components/NavBarMain"
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="appcontainer" className="flex flex-row w-full h-full bg-black">
|
||||||
|
<div id="navbarcontainer" className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shadow-lg shadow-blue-900/50">
|
||||||
|
</div>
|
||||||
|
<div id="maincontainer" className="w-full lg:w-5/6 bg-gray-950/50 flex flex-col">
|
||||||
|
<div id="navbarmaincontainer" className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 shadow-md shadow-blue-900/35 sticky top-0 z-10">
|
||||||
|
<NavBarMain />
|
||||||
|
</div>
|
||||||
|
<div id="maincontentcontainer" className="w-full grow">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
7
cdrm-frontend/src/assets/icons/hamburger.svg
Normal file
7
cdrm-frontend/src/assets/icons/hamburger.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||||
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<g id="SVGRepo_iconCarrier"> <path d="M20 7L4 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 12L4 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 17L4 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 703 B |
18
cdrm-frontend/src/components/NavBarMain.jsx
Normal file
18
cdrm-frontend/src/components/NavBarMain.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import hamburgerIcon from '../assets/icons/hamburger.svg'
|
||||||
|
|
||||||
|
function NavBarMain () {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row w-full h-full">
|
||||||
|
<button className="w-24 p-4">
|
||||||
|
<img src={hamburgerIcon} alt="Menu" className="w-full h-full cursor-pointer" />
|
||||||
|
</button>
|
||||||
|
<p className='grow text-white text-2xl font-bold text-center flex items-center justify-center'>
|
||||||
|
CDRM-Project
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavBarMain
|
1
cdrm-frontend/src/index.css
Normal file
1
cdrm-frontend/src/index.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
10
cdrm-frontend/src/main.jsx
Normal file
10
cdrm-frontend/src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
8
cdrm-frontend/vite.config.js
Normal file
8
cdrm-frontend/vite.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
})
|
Loading…
x
Reference in New Issue
Block a user