Skip to content

Commit

Permalink
refactor: Update SCSS imports and remove unnecessary CSS file
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiegoT4l
DiegoT4l committed Sep 11, 2024
1 parent c606b23 commit f43e2fb
Show file tree
Hide file tree
Showing 12 changed files with 1,770 additions and 1,423 deletions.
2,585 changes: 1,209 additions & 1,376 deletions package-lock.json
View file

Large diffs are not rendered by default.

111 changes: 76 additions & 35 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,95 @@
<!DOCTYPE html>
<html lang="es" data-bs-theme="dark">
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap"
rel="stylesheet">
<title>Dashboard Tasks</title>
</head>

<body>
<nav class="navbar navbar-dark bg-dark">
<h1 class="mb-0">TASK DASHBOARD</h1>
</nav><!-- .navbar -->

<div class="accordion" id="accordionCreateTask">
<div class="accordion-item ">
<h2 class="accordion-header mb-0">
<button class="accordion-button d-flex justify-content-center align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<i class="bi bi-plus-circle-dotted"></i>&nbsp;AGREGAR NUEVA TAREA
</button>
</h2><!-- .accordion header -->
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionCreateTask">
<div class="accordion-body">
<div class="col-md-6 container">
<form id="task-form">
<div class="form-group">
<label for="task-name">Nombre de la Tarea</label>
<input type="text" class="form-control" id="task-name" required>
<div class="container-fluid">
<div class="row vh-100">
<!-- Sidebar -->
<aside class="col-md-3 bg-white shadow-md p-4">
<h1 class="fs-3 fw-bold mb-4">Task Master</h1>
<nav class="nav flex-column mb-5">
<button type="button" class="btn text-start">All Tasks</button>
<button type="button" class="btn text-start">Upcoming</button>
<button type="button" class="btn text-start">Completed</button>
<button type="button" class="btn text-start">Calendar</button>
<button type="button" class="btn text-start">Statistics</button>
<button type="button" class="btn text-start">Settings</button>
</nav>
<div>
<h2 class="fs-5 fw-semibold">Task Summary</h2>
<p>Total Tasks: <span id="total-tasks">0</span></p>
<p>Completed: <span id="completed-tasks">0</span></p>
<p>Completion Rate: <span id="completion-rate">0</span>%</p>
<div class="progress" id="progress-bar">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
</div>
</aside>

<!-- Main Content -->
<main class="col-md-9 p-4">
<h2 class="fs-2 fw-bold">Dashboard</h2>

<!-- Task Input -->
<div class="card mb-4">
<div class="card-header">
<h3 class="fs-4">Add New Task</h3>
</div>
<div class="card-body">
<form id="task-form" class="row g-3">
<div class="col-md-4">
<input type="text" id="new-task" class="form-control" placeholder="Enter task title">
</div>
<div class="col-md-3">
<select id="new-task-category" class="form-select">
<option selected value="Work">Work</option>
<option value="Personal">Personal</option>
<option value="Shopping">Shopping</option>
<option value="Health">Health</option>
<option value="Finance">Finance</option>
</select>
</div>
<div class="col-md-3">
<input type="date" id="new-task-due-date" class="form-control">
</div>
<div class="form-group">
<label for="task-desc">Descripción</label>
<textarea class="form-control" id="task-desc" rows="3"></textarea>
<div class="col-md-2">
<button type="submit" class="btn btn-primary">Add Task</button>
</div>
<button type="submit" class="btn btn-primary mt-4">Agregar Tarea</button>
</form>
</div>
</div>
</div><!-- .accordion body -->
</div>
</div><!-- .add new task -->

<div class="container mt-4">
<div class="col">
<div class="col-md-6">
<h2>Lista de Tareas</h2>
<ul id="task-list" class="list-group"></ul>
</div>

<!-- Task List -->
<div class="card">
<div class="card-header">
<h3 class="fs-4">Tasks</h3>
</div>
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<button id="filter-all" class="btn btn-outline-primary">All</button>
<button id="filter-active" class="btn btn-outline-primary">Active</button>
<button id="filter-completed" class="btn btn-outline-primary">Completed</button>
<!-- Repeat buttons for each category -->
</div>
<ul id="task-list" class="list-group"></ul>
</div>
</div>
</main>
</div>
</div> <!-- .task list -->
</div>


<script type="text/module" src="js/main.mjs"></script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion src/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

// Import our custom CSS
import '../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css'
import '../css/styles.scss'
import '../scss/styles.scss'

// Import all of Bootstrap's JS
// import * as bootstrap from 'bootstrap'
Expand Down
38 changes: 38 additions & 0 deletions src/scss/base/_global.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@use 'variables' as *;


html {
box-sizing: border-box;
scroll-padding-top: 0;
scroll-behavior: smooth;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-optical-sizing: auto;
font-style: normal;
background-color: #f3f4f6;
&.overflow-hidden {
overflow: hidden;
}
}
img {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
aside {
background-color: white;
padding: 2rem;
}
.card {
margin-bottom: 2rem;
}
#task-list .completed {
text-decoration: line-through;
color: gray;
}
3 changes: 3 additions & 0 deletions src/scss/base/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@forward 'normalize';
@forward 'variables';
@forward 'global';
43 changes: 43 additions & 0 deletions src/scss/base/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@use 'variables' as *;

@mixin mobile {
@media (min-width: $mobile) {
@content;
}
}

@mixin tablet {
@media (min-width: $tablet) {
@content;
}
}

@mixin desktop {
@media (min-width: $desktop) {
@content;
}
}

@mixin desktopXL {
@media (min-width: $desktopXL) {
@content;
}
}

@mixin container {
width: 95%;
max-width: 120rem;
margin: 0 auto;
}

@mixin grid($columns: 1, $gap: 5rem) {
display: grid;
grid-template-columns: repeat($columns, 1fr);
gap: $gap;
}

@mixin list-reset {
list-style: none;
padding: 0;
margin: 0;
}
Loading

0 comments on commit f43e2fb

Please sign in to comment.