Skip to content
GitLab
Commit 1b8d28e7 authored by Vasko Mitevski's avatar Vasko Mitevski
Browse files

sidebar done

parent e0febad9
main create_product_changes dev modifying_index_blades_layouts responsive_sidebar sidebar
3 merge requests!26finished the issue with the size/stock/color... in all three blades> create,...,!16still working on the responsive side bar..,!15Sidebar
Hide whitespace changes
Inline Side-by-side
Showing
with 102 additions and 53 deletions
+102 -53
public/css/app.css
+ 62
- 31
View file @ 1b8d28e7
......@@ -23,13 +23,17 @@ body {
transition: var(--tran-04);
}
body.dark{
body.dark {
--vintage-pink: rgb(80, 46, 55);
--vintage-pink-light: rgb(114, 80, 86);
--text-color: rgb(235, 226, 226);
--text-color-light: rgb(190, 183, 183);
}
.background-darker {
background-color: rgb(148, 104, 111);
}
ul {
padding-left: 0 !important;
/* margin: 0; */
......@@ -45,11 +49,11 @@ .sidebar {
width: 250px;
padding: 10px 14px;
background: var(--vintage-pink);
transition: var(--tran-05);
transition: var(--tran-03);
}
.sidebar.close{
width: 88px!important;
.sidebar.close {
width: 88px !important;
}
/* reusable CSS */
......@@ -57,10 +61,13 @@ .sidebar .text {
font-size: 16px;
font-weight: 500;
color: var(--text-color);
transition: var(--tran-04);
white-space: nowrap;
opacity: 1;
}
.sidebar.close .text{
opacity: 0;
.sidebar.close .text {
opacity: 0;
}
.sidebar .image {
......@@ -93,13 +100,19 @@ .sidebar li .text {
.sidebar header {
position: relative;
margin-bottom: 2em;
}
.sidebar .image-text img {
width: 60%;
position: relative;
left: -15px;
width: 80%;
margin: auto;
}
.sidebar.open .image-text img {
left: 0;
}
.sidebar header .image-text {
display: flex;
align-items: center;
......@@ -121,7 +134,7 @@ .sidebar header .toggle {
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background: var(--vintage-pink-light);
......@@ -131,19 +144,11 @@ .sidebar header .toggle {
border-radius: 50%;
color: var(--text-color);
cursor: pointer;
transition: var(--tran-03);
}
.sidebar .search-box {
background: var(--vintage-pink-light);
}
.search-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
border-radius: 6px;
background: var(--vintage-pink-light);
.sidebar.close header .toggle {
transform: translateY(-50%);
}
.sidebar li a {
......@@ -165,7 +170,6 @@ .sidebar li a:hover .text {
}
.sidebar .menu-bar {
/* background: red; */
height: 80%;
display: flex;
flex-direction: column;
......@@ -173,6 +177,8 @@ .sidebar .menu-bar {
}
.menu-bar .mode {
position: relative;
border-radius: 6px;
background: var(--vintage-pink-light);
}
......@@ -183,15 +189,25 @@ .menu-bar .mode .moon-sun {
align-items: center;
}
.menu-bar .mode {
.menu-bar .mode i {
position: absolute;
transition: var(--tran-03);
}
.menu-bar .mode i.sun {
opacity: 0;
}
.menu-bar .mode i.sun{
body.dark .menu-bar .mode i.sun {
opacity: 1;
}
body.dark .menu-bar .mode i.moon-sun {
opacity: 0;
}
.menu-bar .mode .toggle-switch{
.menu-bar .mode .toggle-switch {
position: absolute;
right: -10px;
display: flex;
align-items: center;
justify-content: center;
......@@ -200,9 +216,10 @@ .menu-bar .mode .toggle-switch{
border-radius: 25px;
border: none;
cursor: pointer;
border-radius: 6px;
}
.toggle-switch .switch{
.toggle-switch .switch {
position: relative;
height: 22px;
width: 44px;
......@@ -210,8 +227,8 @@ .toggle-switch .switch{
background: rgb(61, 167, 152);
}
.switch::before{
content: '';
.switch::before {
content: "";
position: absolute;
height: 15px;
width: 15px;
......@@ -219,14 +236,28 @@ .switch::before{
top: 50%;
left: 5px;
transform: translateY(-50%);
background: var(--vintage-pink);
transition: var(--tran-03);
background: var(--vintage-pink);
transition: var(--tran-03);
}
body.dark .switch::before{
body.dark .switch::before {
left: 24px;
}
/* .home {
position: relative;
left: 250px;
height: 100vh;
width: calc(100%-250px);
background: var(--vintage-pink-light);
}
.sidebar.close ~ .home {
left: 88px;
width: calc(100%-88px);
} */
/* body {
overflow-x: hidden;
}
......@@ -301,10 +332,10 @@ .sidebar-expanded-text-container,
.user-info {
margin-right: 10px;
} */
#content {
/* #content {
transition: margin-left 0.5s ease;
padding: 15px;
}
} */
#searchInput {
border: 1px solid rgb(160, 154, 154);
......
public/js/script.js
+ 28
- 2
View file @ 1b8d28e7
......@@ -39,18 +39,44 @@ document.addEventListener("DOMContentLoaded", function () {
tableView.classList.add("d-none");
});
}
const body = document.querySelector("body");
const sidebar = document.querySelector(".sidebar");
const toggle = document.querySelector(".toggle");
// searchBtn = document.querySelector(".search-box"),
const searchBtn = document.querySelector(".search-box");
const modeSwitch = document.querySelector(".toggle-switch");
const modeText = document.querySelector(".mode-text");
const image = document.querySelector(".image");
// to set dark mode
function setDarkMode(isDark) {
if (isDark) {
body.classList.add("dark");
body.classList.add("background-darker");
} else {
body.classList.remove("dark");
body.classList.remove("background-darker");
}
}
// Check for stored dark mode in local storage (doesnt work quite well...)
const darkMode = localStorage.getItem("darkMode") === "true";
setDarkMode(darkMode);
toggle.addEventListener("click", () => {
sidebar.classList.toggle("close");
sidebar.classList.toggle("open");
});
modeSwitch.addEventListener("click", () => {
body.classList.toggle("dark");
const isDark = !body.classList.contains("dark");
setDarkMode(isDark);
localStorage.setItem("darkMode", isDark);
if (body.classList.contains("dark")) {
modeText.innerText = "Light Mode";
} else {
modeText.innerText = "Dark Mode";
}
});
});
resources/views/layouts/app.blade.php
+ 7
- 12
View file @ 1b8d28e7
......@@ -25,23 +25,18 @@
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 px-0 bg-dar collapsed" id="sidebar">
@include('layouts.navbar')
</div>
<div class="col-9 offset-3" id="content">
@yield('content')
</div>
</div>
<div>
@include('layouts.navbar')
</div>
<div class="home" id="content">
@yield('content')
</div>
<script src="{{ asset('js/script.js') }}"></script>
{{-- <script src="{{ asset('js/profile.js') }}"></script> --}}
<script src="{{ asset('js/profile.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</body>
</html>
resources/views/layouts/navbar.blade.php
+ 3
- 6
View file @ 1b8d28e7
......@@ -8,14 +8,8 @@
<i class='bx bx-chevron-right toggle'></i>
</header>
<div class="menu-bar">
<div class="menu">
<li class="search-box">
<i class='bx bx-search icon' ></i>
<input type="search" placeholder="Search...">
</li>
<ul class="menu-links">
<li class="nav-link">
<a href="{{ route('products.index') }}">
......@@ -82,6 +76,9 @@
</div>
</nav>
{{-- <section class="home">
<div class="text">Dashboard</div>
</section> --}}
......
resources/views/products/index.blade.php
+ 2
- 2
View file @ 1b8d28e7
......@@ -3,7 +3,7 @@
@section('content')
<div class="container container-fluid">
<div class="row">
<div class="col-12 text-right mt-5">
<div class="col-8 offset-3 text-right mt-5">
@if(session('success'))
<div class="alert alert-success text-center" role="alert">
{{ session('success') }}
......@@ -22,7 +22,7 @@
</div>
<div class="row" id="tableView">
@foreach($products as $product)
<div class="col-12 col-md-6 col-xl-4 mb-4">
<div class="col-9 offset-3 mb-4">
<div class="card px-1 py-4 product">
@if($product->stock_quantity === 1)
<div class="badge badge-warning" style="position: absolute; top: 0; left: 0;">*само 1 парче</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment