feat: added styling

This commit is contained in:
Smigz 2025-06-14 20:54:36 -04:00
parent 8be819bf91
commit 5ab9f0b2c2
7 changed files with 34 additions and 22 deletions

View file

@ -41,7 +41,7 @@ model File {
model Folder { model Folder {
id String @id @default(uuid()) id String @id @default(uuid())
name String @db.VarChar(255) name String @db.VarChar(255)
creation_date DateTime @default(now()) createdAt DateTime @default(now())
modification_date DateTime @default(now()) modification_date DateTime @default(now())
File File[] File File[]
owner User? @relation(fields: [owner_user_id], references: [id]) owner User? @relation(fields: [owner_user_id], references: [id])

View file

@ -141,8 +141,17 @@ input[type='file']:focus::file-selector-button {
main { main {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
width: 100%;
}
main > div {
width: 100%;
}
aside {
min-width: 250px;
padding: 1em;
} }
.flex { .flex {
display: flex; display: flex;
@ -153,5 +162,9 @@ main {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.app {
height: 100%;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
} }

View file

@ -2,9 +2,10 @@ const {
getDirectoryContents, getDirectoryContents,
getParentDirectories, getParentDirectories,
} = require('../services/fileService'); } = require('../services/fileService');
const { formatBytes } = require('../utils/formatHelpers');
const indexGet = async (req, res) => { const indexGet = async (req, res) => {
if (req.user) { if (req.isAuthenticated()) {
res.redirect(`/fs/${req.user.username}/${req.user.rootDirectoryId}`); res.redirect(`/fs/${req.user.username}/${req.user.rootDirectoryId}`);
// if unauthenticated redirect // if unauthenticated redirect
} else { } else {
@ -27,6 +28,7 @@ const userDirectoryNavigation = async (req, res) => {
folder: { id: directoryId, name: dirContents.name }, folder: { id: directoryId, name: dirContents.name },
directoryListing: dirContents, directoryListing: dirContents,
parentDirectories: parentDirectories, parentDirectories: parentDirectories,
formatBytes: formatBytes,
}); });
}; };

View file

@ -51,8 +51,7 @@ passport.deserializeUser(async (id, done) => {
}); });
const loggedIn = function (req, res, next) { const loggedIn = function (req, res, next) {
if (req.isAuthenticated()) console.log('logged in'); if (!req.isAuthenticated()) res.redirect('/');
if (!req.user) res.redirect('/');
next(); next();
}; };

View file

@ -8,7 +8,7 @@ const getFullUploadPath = async (folderId, folderName, username, filename) => {
}; };
const formatBytes = (bytes, decimals = 2) => { const formatBytes = (bytes, decimals = 2) => {
if (!+bytes) return '0 Bytes'; if (!+bytes) return '-';
const k = 1024; const k = 1024;
const dm = decimals < 0 ? 0 : decimals; const dm = decimals < 0 ? 0 : decimals;

View file

@ -1,23 +1,22 @@
<%- include('partials/header') %> <%- include('partials/header') %>
<body> <body>
<% if(currentUser) { %> <% if(currentUser) { %>
<div class="container flex"> <div class="container flex app">
<p> Hello <%= currentUser.username %> </p> <aside class="nav">
<a href="/auth/logout">sign out</a> <p> Hello <%= currentUser.username %> </p>
</div> <a href="/auth/logout">sign out</a>
<%- include('partials/newDirectory') %>
<%- include('partials/fileUpload') %>
</aside>
<main> <main>
<div class="container"> <div class="container">
<div class="container flex">
<%- include('partials/newDirectory') %>
<%- include('partials/fileUpload') %>
</div>
<%- include('partials/parentDirectories') %> <%- include('partials/parentDirectories') %>
<%- include('partials/directoryListing') %> <%- include('partials/directoryListing') %>
</div> </div>
</main> </main>
</div>
<% } else { %> <% } else { %>
<main> <main>
<form action="/auth/login" method="post"> <form action="/auth/login" method="post">

View file

@ -1,15 +1,15 @@
<section class="container directory-listing"> <section class="container directory-listing">
<div class="directory-grid"> <div class="directory-grid">
<div class="col file-name heading directory__grid_heading"> <div class="col file-name heading directory__grid_heading">
<p>Name</p> <p class="title__heading">Name</p>
</div> </div>
<div class="col file-size directory__grid__heading"> <div class="col file-size directory__grid__heading">
<p>Size</p> <p class="title__heading">Size</p>
</div> </div>
<div class="col file-modified directory__grid__heading"> <div class="col file-modified directory__grid__heading">
<p>Modified Last</p> <p class="title__heading">Created</p>
</div> </div>
<!-- Combined loop for both directories and files --> <!-- Combined loop for both directories and files -->
<% <%
@ -23,10 +23,10 @@
<% } %> <% } %>
</div> </div>
<div class="col file-size"> <div class="col file-size">
<p><%= item?.size %></p> <p><%= formatBytes(item?.size) %></p>
</div> </div>
<div class="col file-modified"> <div class="col file-modified">
<p><%= item?.modifiedAt %></p> <p><%= item?.createdAt %></p>
</div> </div>
<% }; %> <% }; %>
@ -36,6 +36,5 @@
<!-- Render files --> <!-- Render files -->
<% directoryListing.File.forEach(f => renderItem(f, false)); %> <% directoryListing.File.forEach(f => renderItem(f, false)); %>
</div> </div>
</div>
</div>
</section> </section>