From 2c69d7a87f702b458aac0136b476246e248957e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Wed, 27 Jul 2022 23:46:08 +0300 Subject: [PATCH 01/43] Refactor scroll-to-top mechanism --- resources/css/main.scss | 1 - resources/scripts/main.js | 14 +++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/resources/css/main.scss b/resources/css/main.scss index 7b06610..f0cc49a 100644 --- a/resources/css/main.scss +++ b/resources/css/main.scss @@ -270,7 +270,6 @@ a { #scroll-to-top { width: $px_scroll-to-top_size; height: $px_scroll-to-top_size; - display: none; position: fixed; right: 25px; bottom: 55px; diff --git a/resources/scripts/main.js b/resources/scripts/main.js index c746052..c111e12 100644 --- a/resources/scripts/main.js +++ b/resources/scripts/main.js @@ -1,10 +1,11 @@ +const SCROLL_MIN = 100; scroll_to_top = document.getElementById("scroll-to-top"); -window.onscroll = function () { - if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) { - scroll_to_top.style.display = "block"; +function checkScroll() { + if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) { + scroll_to_top.style.visibility = "visible"; } else { - scroll_to_top.style.display = "none"; + scroll_to_top.style.visibility = "hidden"; } } @@ -60,4 +61,7 @@ async function toggleDropdown() { hideDropdown(); hideNavitems(); } -} \ No newline at end of file +} + +window.addEventListener('load', checkScroll); +window.addEventListener('scroll', checkScroll); \ No newline at end of file From 0b5df35dbf78ce78295f9a99c5aed46fc184deaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Thu, 28 Jul 2022 00:34:39 +0300 Subject: [PATCH 02/43] Rename dropdown to drawer and redo toggle mechanism --- resources/css/main.scss | 20 ++++++++++++++++---- resources/scripts/main.js | 29 +++++++++-------------------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/resources/css/main.scss b/resources/css/main.scss index f0cc49a..c12c550 100644 --- a/resources/css/main.scss +++ b/resources/css/main.scss @@ -85,16 +85,18 @@ a { } } -.dropdown { +#drawer { position: fixed; + top: 0; + right: 0; z-index: 2; background: variables.$cg_drawer; - width: 100%; + width: 0; height: 90vh; - -webkit-animation: drawer-open 550ms; - animation: drawer-open 550ms; + display: flex; flex-direction: column; align-items: center; + transition: width 500ms; .dropdown-nav-item { position: relative; @@ -132,6 +134,12 @@ a { } } + &.expanded { + width: 100%; + top: unset; + bottom: 0; + } + @include mixins.header_overflow2 { height: calc(100vh - 45px); } @@ -258,6 +266,10 @@ a { @include mixins.header_overflow2 { min-height: calc(100vh - 45px); } + + &.hidden { + display: none; + } } #content { diff --git a/resources/scripts/main.js b/resources/scripts/main.js index c111e12..cd2b0be 100644 --- a/resources/scripts/main.js +++ b/resources/scripts/main.js @@ -1,5 +1,7 @@ const SCROLL_MIN = 100; scroll_to_top = document.getElementById("scroll-to-top"); +el_drawer = document.getElementById("drawer"); +el_container = document.getElementById("container"); function checkScroll() { if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) { @@ -18,17 +20,16 @@ async function sleep(milliseconds) { return new Promise(resolve => setTimeout(resolve, milliseconds)); } -let dropdown = document.getElementsByClassName('dropdown')[0]; let navitems = document.getElementsByClassName('dropdown-nav-item'); function showDropdown() { - dropdown.classList.remove('hidden'); - dropdown.classList.add('flex'); + el_drawer.classList.remove('hidden'); + el_drawer.classList.add('flex'); } function hideDropdown() { - dropdown.classList.remove('flex'); - dropdown.classList.add('hidden'); + el_drawer.classList.remove('flex'); + el_drawer.classList.add('hidden'); } function showNavitems() { @@ -46,21 +47,9 @@ function hideNavitems() { } async function toggleDropdown() { - if (dropdown.classList.contains('hidden')) { - showDropdown(); - await sleep(550); - document.getElementById("container").style.display = "none"; - await sleep(200); - showNavitems(); - } - else { - document.getElementById("container").style.display = "grid"; - dropdown.classList.add('dropdown_close_animation'); - await sleep(550); - dropdown.classList.remove('dropdown_close_animation'); - hideDropdown(); - hideNavitems(); - } + el_drawer.classList.toggle("expanded"); + await sleep(500); + el_container.classList.toggle("hidden"); } window.addEventListener('load', checkScroll); From 1f0b2dfa663bac59550033caac2e35a7f9b29f3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Thu, 28 Jul 2022 11:04:30 +0300 Subject: [PATCH 03/43] Remove dropdown-nav-item appear animation --- galeri.html | 12 ++++++------ resources/css/main.scss | 10 ++++++---- resources/scripts/main.js | 31 ++++--------------------------- 3 files changed, 16 insertions(+), 37 deletions(-) diff --git a/galeri.html b/galeri.html index 8131cdf..e5cfa2c 100644 --- a/galeri.html +++ b/galeri.html @@ -43,12 +43,12 @@ -
-
    • diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss index 2ac35b9..df2172c 100644 --- a/resources/css/views/index.scss +++ b/resources/css/views/index.scss @@ -63,7 +63,7 @@ $social-button_inner_margin: 10px; left: 0; color: transparent; background-size: cover; - background-position: 50% 50%; + background-position: 50% 90%; background-repeat: no-repeat; opacity: 0; z-index: 0; @@ -72,6 +72,7 @@ $social-button_inner_margin: 10px; li:nth-child(1) span { background-image: urls.$index_slide1; + background-position-y: 50%; } li:nth-child(2) span { background-image: urls.$index_slide2; From ed1b83d9fd90599ebafb2d7c9a5bef07a5fb947c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Sat, 30 Jul 2022 19:13:54 +0300 Subject: [PATCH 31/43] Use .paragraph in .table-item elements --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 6220d35..d9fb560 100644 --- a/index.html +++ b/index.html @@ -63,17 +63,17 @@
    Uğur Galeri U logosu
    -

    Şirketimiz 1996 yılında Karacabey, Bursa'da ikinci el ticari araç ve ağır vasıta satışına başlamıştır. Köklü galericilik deneyimini, satış politikalarını ve zamana ayak uyduran yenilikçi bakış açısını bünyesinde harmanlayan, sektöre yön veren ve yapmış olduğu işler ile sektördeki varlığını kanıtlamış bir firmadır. Satın alma için tıklayınız.

    +

    Şirketimiz 1996 yılında Karacabey, Bursa'da ikinci el ticari araç ve ağır vasıta satışına başlamıştır. Köklü galericilik deneyimini, satış politikalarını ve zamana ayak uyduran yenilikçi bakış açısını bünyesinde harmanlayan, sektöre yön veren ve yapmış olduğu işler ile sektördeki varlığını kanıtlamış bir firmadır. Satın alma için tıklayınız.

    Uğur Koçak Treyler logosu
    -

    Uğur Koçak Treyler, müşteri gereksinimlerine istinaden 2012 yılında sıfır araç satışı yapmak için kurulmuştur. Firma Uğur Galeri yerleşkesi içerisinde distribütörlük/bayilik anlaşması yapmış olduğu ağır vasıta sektörünün treyler grubunda öncü firmalar ile çalışmakta olup müşterilerin ihtiyaçlarına en hızlı, en doğru ve en kullanışlı biçimde cevap verebilecek niteliktedir.
    Satış yelpazesinde Krone, Makinsan ve Otokar firmaları yer almaktadır. Satın alma için tıklayınız.

    +

    Uğur Koçak Treyler, müşteri gereksinimlerine istinaden 2012 yılında sıfır araç satışı yapmak için kurulmuştur. Firma Uğur Galeri yerleşkesi içerisinde distribütörlük/bayilik anlaşması yapmış olduğu ağır vasıta sektörünün treyler grubunda öncü firmalar ile çalışmakta olup müşterilerin ihtiyaçlarına en hızlı, en doğru ve en kullanışlı biçimde cevap verebilecek niteliktedir.
    Satış yelpazesinde Krone, Makinsan ve Otokar firmaları yer almaktadır. Satın alma için tıklayınız.

    galericilerden.com logosu
    -

    2018 yılında interaktif satışın müşterilerin talepleri doğrultusunda mevcut ürünlerin tanıtımı ve pazarlanması amacıyla Uğur Galeri bünyesinde e-ticaret alışveriş sitesi olarak kurulmuştur. Hedefimiz, galeri sahiplerinin güvenilir bir platformda araçlarını detaylı biçimde sunabilmeleri; müşterilerin de ihtiyaçlarına göre güvenilir ve uygun şekilde ulaşmalarını sağlamaktır.

    +

    2018 yılında interaktif satışın müşterilerin talepleri doğrultusunda mevcut ürünlerin tanıtımı ve pazarlanması amacıyla Uğur Galeri bünyesinde e-ticaret alışveriş sitesi olarak kurulmuştur. Hedefimiz, galeri sahiplerinin güvenilir bir platformda araçlarını detaylı biçimde sunabilmeleri; müşterilerin de ihtiyaçlarına göre güvenilir ve uygun şekilde ulaşmalarını sağlamaktır.