mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-06-27 11:20:40 -04:00
feat: added styling
This commit is contained in:
parent
8be819bf91
commit
5ab9f0b2c2
7 changed files with 34 additions and 22 deletions
|
@ -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])
|
||||||
|
|
|
@ -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) {
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue