diff options
Diffstat (limited to 'packages/client/src')
22 files changed, 603 insertions, 323 deletions
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue index f4d00ca..e74b3f9 100644 --- a/packages/client/src/App.vue +++ b/packages/client/src/App.vue @@ -3,20 +3,15 @@ </template> <style lang="scss"> -@use "./scss/colors"; +@use "scss/colors"; +@use "scss/variables"; +@use "scss/fonts"; -@import "./scss/bootstrap"; - -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/utilities/api"; -@import "~bootstrap/scss/containers"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/tooltip"; - -@import "./scss/fonts"; +$gutter-x: 1.5rem; +$gutter-y: 0rem; #app { - font-family: $font-primary; + font-family: fonts.$primary; color: colors.$text; min-height: 100vh; background-color: colors.$background; @@ -25,8 +20,86 @@ a { color: colors.$text; text-decoration: none; + transition: color 0.15s ease-in-out; &:hover { color: colors.$primary-light; } } + +.container { + display: flex; + width: 100%; + padding-right: 0; + padding-left: 0; + margin-right: auto; + margin-left: auto; + flex-flow: column; + height: 100vh; +} + +.row { + display: flex; + flex-wrap: wrap; + margin-top: calc(#{$gutter-y} * -1); + margin-right: 0; + margin-left: 0; + height: 100%; + + > * { + width: 100%; + max-width: 100%; + padding-right: calc(#{$gutter-x} / 2); + padding-left: calc(#{$gutter-x} / 2); + margin-top: $gutter-y; + } +} + +.col { + flex: 1 0 0%; + margin-left: 3rem; + margin-top: 1rem; +} + +.fs-1 { + font-size: variables.$font-size-1; +} +.fs-2 { + font-size: variables.$font-size-2; +} +.fs-3 { + font-size: variables.$font-size-3; +} +.fs-4 { + font-size: variables.$font-size-4; +} +.fs-5 { + font-size: variables.$font-size-5; +} +.fs-6 { + font-size: variables.$font-size-6; +} + +@media (max-width: 1200px) { + .fs-1 { + font-size: calc(1.375rem + 0.667vw) !important; + } + .fs-2 { + font-size: calc(1.325rem + 1.584vw) !important; + } + .fs-3 { + font-size: calc(1.3rem + 0.017vw) !important; + } + .fs-4 { + font-size: calc(0.82rem + 0.4vw) !important; + } + .fs-5 { + font-size: calc(0.65rem + 0.25vw) !important; + } +} + +@media (min-width: 576px) { + .col { + margin-left: 4.5rem; + } +} </style> diff --git a/packages/client/src/components/BaseBackButton.vue b/packages/client/src/components/BaseBackButton.vue index e1191f9..2de0c77 100644 --- a/packages/client/src/components/BaseBackButton.vue +++ b/packages/client/src/components/BaseBackButton.vue @@ -1,5 +1,5 @@ <template> - <div class="d-inline"> + <div> <router-link :to="to"> <svg xmlns="http://www.w3.org/2000/svg" id="back" diff --git a/packages/client/src/components/BaseBreadcrumb.vue b/packages/client/src/components/BaseBreadcrumb.vue index 91c0109..65dffd4 100644 --- a/packages/client/src/components/BaseBreadcrumb.vue +++ b/packages/client/src/components/BaseBreadcrumb.vue @@ -33,7 +33,28 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; -@import "~bootstrap/scss/breadcrumb"; +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: 0 0; + margin-bottom: 1rem; + list-style: none; + a { + color: colors.$text; + text-decoration: none; + } + .active { + color: #6c757d; + } + .breadcrumb-item { + padding-left: 0.5rem; + } + .breadcrumb-item + .active::before { + float: left; + padding-right: 0.5rem; + color: #6c757d; + content: "/"; + } +} </style> diff --git a/packages/client/src/components/BaseButton.vue b/packages/client/src/components/BaseButton.vue new file mode 100644 index 0000000..2a528b0 --- /dev/null +++ b/packages/client/src/components/BaseButton.vue @@ -0,0 +1,29 @@ +<template> + <button :type="type ? type : ''"> + {{ value }} + </button> +</template> + +<script> +export default { + name: "BaseButton", + props: { + type: { + type: String, + required: true + }, + value: { + type: String, + required: true + } + } +}; +</script> + +<style lang="scss" scoped> +@use "../scss/mixins"; + +button { + @include mixins.button; +} +</style> diff --git a/packages/client/src/components/CommitPatch.vue b/packages/client/src/components/CommitPatch.vue index cf15eda..fdeb28d 100644 --- a/packages/client/src/components/CommitPatch.vue +++ b/packages/client/src/components/CommitPatch.vue @@ -15,17 +15,17 @@ export default { let commit_patch; if(props.patch.too_large === false) { - let all_hunks = props.patch.hunks.map((hunk) => hunk.hunk); + let all_hunks = props.patch.hunks.map((hunk) => hunk.hunk.split("\n").slice(1).join("\n")); const language = hljs_languages.find((lang) => lang.extensions.some((extension) => props.patch.to.endsWith(extension))); let highlighted = language ? hljs.highlight(all_hunks.join("\n"), { language: language.name }) : hljs.highlightAuto(all_hunks.join("\n")); - console.log(highlighted); highlighted = highlighted.value.split("\n"); const highlighted_hunks = []; let hunk_start = 0; - all_hunks.forEach((hunk) => { + all_hunks.forEach((hunk, index) => { const hunk_row_cnt = hunk.split("\n").length; + all_hunks[index] = props.patch.hunks[index].hunk.split("\n")[0] + all_hunks[index]; highlighted_hunks.push(highlighted.slice(hunk_start, hunk_start + hunk_row_cnt)); hunk_start = hunk_start + hunk_row_cnt; }); diff --git a/packages/client/src/components/HomeHeader.vue b/packages/client/src/components/HomeHeader.vue index 24afd5b..b108b9b 100644 --- a/packages/client/src/components/HomeHeader.vue +++ b/packages/client/src/components/HomeHeader.vue @@ -1,11 +1,9 @@ <template> - <div id="header" class="d-flex mt-3 mb-3 ms-2"> - <div class="d-inline ms-3"> - <span id="title" class="fs-1">{{ title }}</span> - <p id="about" class="mb-3 fs-4"> - {{ about }} - </p> - </div> + <div id="header"> + <span id="title" class="fs-1">{{ title }}</span> + <p id="about" class="fs-4"> + {{ about }} + </p> </div> </template> @@ -33,11 +31,17 @@ export default { }; </script> -<style lang="scss"> -@import "../scss/fonts"; +<style lang="scss" scoped> +@use "../scss/mixins"; +@use "../scss/fonts"; + +#header { + @include mixins.header; + flex-direction: column; +} #title { - font-family: $font-title; + font-family: fonts.$title; font-weight: 300; line-height: 0.6; } diff --git a/packages/client/src/components/HomeProjectsHeader.vue b/packages/client/src/components/HomeProjectsHeader.vue index 5966e99..f9aeb20 100644 --- a/packages/client/src/components/HomeProjectsHeader.vue +++ b/packages/client/src/components/HomeProjectsHeader.vue @@ -1,34 +1,39 @@ <template> - <div class="d-flex align-items-center flex-wrap"> - <div id="projects-header" class="ms-4"> + <div id="projects"> + <div id="projects-header"> <span class="fs-1"> Projects </span> </div> - <div id="projects-search" class="d-flex"> + <div id="projects-search"> <form> <input type="search" name="q"> - <input - type="submit" value="Search" - class="btn btn-primary"> + <BaseButton type="submit" value="Search" /> </form> </div> </div> </template> <script> +import BaseButton from "@/components/BaseButton"; + export default { - name: "HomeProjectsHeader" + name: "HomeProjectsHeader", + components: { + BaseButton + } }; </script> <style lang="scss" scoped> -@use "../scss/colors"; -@import "../scss/bootstrap"; - -@import "~bootstrap/scss/buttons"; +#projects { + display: flex; + align-items: center; + flex-wrap: wrap; +} #projects-search { + display: flex; align-items: center; margin-left: auto; margin-right: 15px; diff --git a/packages/client/src/components/RepositoryCloneDropdown.vue b/packages/client/src/components/RepositoryCloneDropdown.vue index ed565ef..a46d569 100644 --- a/packages/client/src/components/RepositoryCloneDropdown.vue +++ b/packages/client/src/components/RepositoryCloneDropdown.vue @@ -1,36 +1,41 @@ <template> - <div id="clone" class="d-flex align-items-center"> - <div class="dropdown"> - <button - class="btn btn-primary btn-sm dropdown-toggle" type="button" - id="dropdownMenuButton1" data-bs-toggle="dropdown" - data-bs-auto-close="outside" aria-expanded="false"> - Clone - </button> - <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1"> - <li class="pt-2"> - <span class="ms-2 fs-5 fw-bold">Clone with HTTP</span> - <label id="clone-url-copy"> - <input - type="text" :value="getURL()" - class="form-control form-control-sm ms-2 me-2" readonly> - <svg - xmlns="http://www.w3.org/2000/svg" height="18px" - viewBox="0 0 24 24" width="18px" - fill="#FFFFFF" @click="copyToClipboard"> - <path d="M0 0h24v24H0z" fill="none" /> - <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" /> - </svg> - </label> - </li> - </ul> + <div id="clone"> + <button + id="dropdown-button" aria-describedby="dropdown-menu" + type="button"> + Clone + </button> + <div id="dropdown-menu" role="dropdown-menu"> + <div> + <p id="dropdown-title" class="fs-5"> + Clone with HTTP + </p> + <div + id="copied-tooltip" role="copied-tooltip" + class="fs-5"> + <div id="tooltip-arrow" /> + Copied! + </div> + <label id="clone-url-copy"> + <input + type="text" :value="getURL()" + readonly> + <svg + xmlns="http://www.w3.org/2000/svg" height="18px" + viewBox="0 0 24 24" width="18px" + fill="#FFFFFF" @click="copyToClipboard" + id="copy"> + <path d="M0 0h24v24H0z" fill="none" /> + <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" /> + </svg> + </label> + </div> </div> </div> </template> <script> -import { Tooltip } from "bootstrap/dist/js/bootstrap.esm"; -// Import Fan from "../util/sleep.worker"; +import { createPopper } from "@popperjs/core"; export default { name: "RepositoryCloneDropdown", @@ -48,41 +53,74 @@ export default { url_box.setSelectionRange(0, 99999); document.execCommand("copy"); - event.stopPropagation(); + const copied_tooltip = document.querySelector("#copied-tooltip"); + copied_tooltip.classList.add("show"); - const exampleEl = document.getElementById("clone-url-copy").getElementsByTagName("svg")[0]; - const tooltip = new Tooltip(exampleEl, { title: "Copied the URL", trigger: "manual" }); - console.log(tooltip); - tooltip.show(); - - await new Promise(resolve => setTimeout(resolve, 1700)); - tooltip.hide(); + await new Promise(resolve => setTimeout(resolve, 2000)); + copied_tooltip.classList.remove("show"); }, getURL() { return `${window.location.protocol}//${window.location.host}/${this.repository}`; } + }, + mounted() { + const dropdown_button = document.querySelector("#dropdown-button"); + const dropdown_menu = document.querySelector("#dropdown-menu"); + + const copied_tooltip = document.querySelector("#copied-tooltip"); + const copy = document.querySelector("#copy"); + const tooltip_arrow = document.querySelector("#tooltip-arrow"); + createPopper(dropdown_button, dropdown_menu, { + placement: "bottom-end", + modifiers: [ + { + name: "offset", + options: { offset: [ 0, 2 ] } + } + ] + }); + createPopper(copy, copied_tooltip, { + placement: "top", + modifiers: [ + { + name: "offset", + options: { offset: [ 0, 10 ] } + }, + { + name: "arrow", + options: { element: tooltip_arrow } + } + ] + }); + + const clickOutsideDropdown = (event) => { + if(!dropdown_menu.contains(event.target) && event.target !== dropdown_button) { + dropdown_menu.classList.remove("show"); + document.removeEventListener("click", clickOutsideDropdown); + } + }; + + dropdown_button.addEventListener("click", () => { + if(dropdown_menu.classList.contains("show")) { + dropdown_menu.classList.remove("show"); + document.removeEventListener("click", clickOutsideDropdown); + } else { + dropdown_menu.classList.add("show"); + document.addEventListener("click", clickOutsideDropdown); + } + }); } }; </script> <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; - -$dropdown-dark-bg: lighten(#000000, 10%); - -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/tooltip"; - -.form-control { - width: auto; -} +@use "../scss/mixins"; +@use "../scss/fonts"; #clone { - margin-left: auto; - margin-right: 40px; + display: flex; + align-items: center; } #clone-url-copy { @@ -95,6 +133,14 @@ $dropdown-dark-bg: lighten(#000000, 10%); display: inline-block; padding-right: 30px; min-height: 0; + background: lighten(#000000, 15%); + border: 1px solid lighten(#000000, 28%); + color: colors.$text; + border-radius: 2px; + height: 25px; + margin-left: 0.5rem; + margin-right: 0.5rem; + font-family: fonts.$primary; } svg { content: ""; @@ -109,4 +155,75 @@ $dropdown-dark-bg: lighten(#000000, 10%); } } } + +#dropdown-button { + @include mixins.button; + padding: 3px 5px 3px 6px; + font-size: 15px; + font-family: fonts.$primary; + &::after { + display: inline-block; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; + } +} + +#dropdown-menu { + visibility: hidden; + pointer-events: none; + background-color: lighten(#000000, 12%); + opacity: 0; + transition:visibility 0.08s linear,opacity 0.08s linear; + border-radius: 5px; + z-index: 1000; + position: absolute; +} + +#copied-tooltip { + visibility: hidden; + pointer-events: none; + position: absolute; + background-color: #000000; + padding-left: 10px; + padding-right: 10px; + padding-top: 2px; + padding-bottom: 2px; + border-radius: 3px; + z-index: 99999; + opacity: 0; + transition:visibility 0.4s linear,opacity 0.4s linear; +} + +.show { + visibility: visible !important; + pointer-events: all !important; + opacity: 1 !important; +} + +#tooltip-arrow { + bottom: -4px; +} + +#tooltip-arrow, +#tooltip-arrow::before { + position: absolute; + width: 8px; + height: 8px; + z-index: -1; +} + +#tooltip-arrow::before { + content: ''; + transform: rotate(45deg); + background: #000000; +} + +#dropdown-title { + margin-left: 0.5rem; + font-weight: 700; +} </style> diff --git a/packages/client/src/components/RepositoryHeader.vue b/packages/client/src/components/RepositoryHeader.vue index 50a1db9..8059809 100644 --- a/packages/client/src/components/RepositoryHeader.vue +++ b/packages/client/src/components/RepositoryHeader.vue @@ -1,7 +1,7 @@ <template> - <div id="header" class="mx-0 d-flex mt-3 ms-2"> + <div id="header"> <BaseBackButton to="/" /> - <div class="d-inline ms-3"> + <div id="header-content"> <span id="title" class="fs-1">{{ name }}</span> <p id="about" class="fs-4"> {{ description }} @@ -33,12 +33,23 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; +@use "../scss/mixins"; +@use "../scss/fonts"; -@import "../scss/bootstrap"; -@import "../scss/fonts"; +#header { + @include mixins.header; + flex-direction: row; + div { + display: inline; + } +} + +#header-content { + margin-left: 1rem; +} #title { - font-family: $font-title; + font-family: fonts.$title; font-weight: 300; line-height: 0.6; } diff --git a/packages/client/src/components/RepositoryNavbar.vue b/packages/client/src/components/RepositoryNavbar.vue index f709976..08fa179 100644 --- a/packages/client/src/components/RepositoryNavbar.vue +++ b/packages/client/src/components/RepositoryNavbar.vue @@ -1,27 +1,24 @@ <template> <div id="navbar"> - <div id="repo-navbar" class="ms-4 ps-4"> - <nav class="navbar navbar-expand navbar-dark"> - <div class="container-fluid px-0"> - <div class="collapse navbar-collapse"> - <ul class="navbar-nav align-items-center flex-fill"> - <li - v-for="(item, index) in nav_items" :key="index" - class="nav-item"> - <router-link - class="nav-link fs-4" :class="{ active: activePage === item }" - :aria-current="(activePage === item) ? 'page' : ''" :to="'/' + repository + '/' + item"> - {{ item }} - </router-link> - </li> - <li class="nav-item ms-auto me-4"> - <RepositoryCloneDropdown :repository="repository" class="d-block" /> - </li> - </ul> - </div> + <nav class="navbar"> + <div class="navbar-container"> + <div class="nav"> + <ul> + <li + v-for="(item, index) in nav_items" :key="index"> + <router-link + class="nav-link fs-4" :class="{ active: activePage === item }" + :aria-current="(activePage === item) ? 'page' : ''" :to="'/' + repository + '/' + item"> + {{ item }} + </router-link> + </li> + <li id="clone-dropdown"> + <RepositoryCloneDropdown :repository="repository" class="d-block" /> + </li> + </ul> </div> - </nav> - </div> + </div> + </nav> </div> </template> @@ -54,7 +51,6 @@ export default { }, watch: { hasReadme() { - console.log("HEEEJ"); this.nav_items = [ "about" ].concat(this.nav_items); } } @@ -63,12 +59,59 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; - -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; #navbar { - line-height: 0; + margin-left: 3rem; +} + +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + flex-wrap: nowrap; + justify-content: flex-start; + .navbar-container { + display: flex; + flex-wrap: inherit; + align-items: center; + justify-content: space-between; + width: 100%; + .nav { + display: flex; + flex-basis: auto; + flex-grow: 1; + align-items: center; + ul { + display: flex; + flex-direction: row; + padding-left: 0; + margin-bottom: 0; + list-style: none; + align-items: center; + flex: 1 1 auto; + .nav-link { + color: darken(#ffffff, 50%); + padding-right: 0.5rem; + padding-left: 0.5rem; + transition: color .15s ease-in-out; + &:hover { + color: darken(#ffffff, 20%); + } + } + #clone-dropdown { + margin-left: auto; + margin-right: 40px; + } + .active { + color: darken(#ffffff, 20%); + } + } + } + } } + </style> diff --git a/packages/client/src/components/RepositoryTreeBlob.vue b/packages/client/src/components/RepositoryTreeBlob.vue index 2a5a6dc..ac4ee32 100644 --- a/packages/client/src/components/RepositoryTreeBlob.vue +++ b/packages/client/src/components/RepositoryTreeBlob.vue @@ -10,7 +10,8 @@ </tbody> </table> <span - v-else v-html="content_lines" /> + v-else v-html="content_lines" + id="markdown-blob" /> </template> <script> @@ -81,9 +82,9 @@ export default { <style lang="scss"> @use "../scss/colors"; +@use "../scss/fonts"; @import "~highlight.js/scss/srcery.scss"; -@import "../scss/fonts"; ul { padding-left: 30px; @@ -99,10 +100,10 @@ code { white-space: pre-wrap; word-wrap: anywhere; background-color: lighten(#000000, 8%); - font-family: $font-primary; + font-family: fonts.$primary; } -span { +#markdown-blob { word-wrap: anywhere; a { color: colors.$primary-light; diff --git a/packages/client/src/components/RepositoryTreeTree.vue b/packages/client/src/components/RepositoryTreeTree.vue index 376cafc..21f9570 100644 --- a/packages/client/src/components/RepositoryTreeTree.vue +++ b/packages/client/src/components/RepositoryTreeTree.vue @@ -10,7 +10,7 @@ <tbody> <tr v-if="path !== ''" @click="$router.push(`/${repository}/tree/${path.split('/').slice(0, -1).join('/') }`)"> <td - class="d-flex align-items-center"> + class="flex-center"> <div class="tree-entry-padding" /> .. </td> @@ -20,7 +20,7 @@ <tr v-for="(entry, entry_name, index) in tree" :key="index" @click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`)"> - <td class="d-flex align-items-center"> + <td class="flex-center"> <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" @@ -82,33 +82,57 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; -#tree { +table { border-spacing: 0; + width: 100%; + margin-bottom: 1rem; + tbody { + vertical-align: inherit; + tr { + &:hover { + background-color: lighten(colors.$background, 5%); + } + td { + padding-bottom: 1em; + &:nth-child(2) a, &:nth-child(3) { + font-weight: 300; + } + padding-top: 5px; + padding-bottom: 5px; + padding-right: 2vw; + } + } + } + thead { + vertical-align: bottom; + } th { - padding-bottom: 5px; - color: colors.$secondary; text-align: start; - padding-right: 20px; - } - tbody tr:hover { - background-color: lighten(colors.$background, 10%); + padding-bottom: 1em; + color: colors.$secondary; } - td { - padding-top: 5px; - padding-bottom: 5px; - padding-right: 2vw; - &:nth-child(2) a, &:nth-child(3) { - font-weight: 300; - } + > :not(caption) > * > * { + padding: 0.2rem 1rem; + border-bottom-width: 1px; } .tree-entry-padding, svg { width: 18px; padding-right: 5px; } - a { - padding-right: 18px; +} + +#log { + padding-left: 0; +} + +@media (max-width: 576px) { + table > :not(caption) > * > * { + padding: 0.1rem; } } +.flex-center { + display: flex; + align-items: center; +} </style> diff --git a/packages/client/src/scss/_bootstrap.scss b/packages/client/src/scss/_bootstrap.scss deleted file mode 100644 index b7cc84f..0000000 --- a/packages/client/src/scss/_bootstrap.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/mixins"; - -$theme-colors: ( - "primary": colors.$primary, - "secondary": colors.$secondary, - "success": colors.$success, - "info": $info, - "warning": $warning, - "danger": colors.$danger, - "light": $light, - "dark": $dark -); - -$font-size-base: 0.75rem; - -$h1-font-size: $font-size-base * 2.5; -$h2-font-size: $font-size-base * 2; -$h3-font-size: $font-size-base * 1.75; -$h4-font-size: $font-size-base * 1.5; -$h5-font-size: $font-size-base * 1.125; -$h6-font-size: $font-size-base; - -$font-sizes: ( - 1: $h1-font-size, - 2: $h2-font-size, - 3: $h3-font-size, - 4: $h4-font-size, - 5: $h5-font-size, - 6: $h6-font-size -); - -$input-bg: lighten(#000000, 12%); -$input-disabled-bg: lighten(#000000, 12%); -$input-color: colors.$text; -$input-focus-color: colors.$text; -$input-focus-box-shadow: none; -$input-disabled-border-color: lighten(#000000, 50%); -$input-height-sm: auto; - -$btn-padding-y-sm: 0.15rem; -$btn-padding-x-sm: 0.4rem; - -$table-cell-padding-x: 1rem; -$table-cell-padding-y: 0.2rem; - -$table-variants: ( - "primary": shift-color($primary, $table-bg-scale), - "secondary": shift-color($secondary, $table-bg-scale), - "success": shift-color($success, $table-bg-scale), - "info": shift-color($info, $table-bg-scale), - "warning": shift-color($warning, $table-bg-scale), - "danger": shift-color($danger, $table-bg-scale), - "light": $light, - "dark": colors.$background, -); - -@media (max-width: 1200px) { - .fs-1 { - font-size: calc(1.375rem + 0.667vw) !important; - } - .fs-2 { - font-size: calc(1.325rem + 1.584vw) !important; - } - .fs-3 { - font-size: calc(1.3rem + 0.017vw) !important; - } - .fs-4 { - font-size: calc(0.82rem + 0.4vw) !important; - } - .fs-5 { - font-size: calc(0.65rem + 0.25vw) !important; - } -}
\ No newline at end of file diff --git a/packages/client/src/scss/_fonts.scss b/packages/client/src/scss/_fonts.scss index cc5561a..6af5233 100644 --- a/packages/client/src/scss/_fonts.scss +++ b/packages/client/src/scss/_fonts.scss @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap'); -$font-title: 'Oxygen', sans-serif; -$font-primary: 'Open Sans', sans-serif;
\ No newline at end of file +$title: 'Oxygen', sans-serif; +$primary: 'Open Sans', sans-serif;
\ No newline at end of file diff --git a/packages/client/src/scss/_mixins.scss b/packages/client/src/scss/_mixins.scss new file mode 100644 index 0000000..a84de6a --- /dev/null +++ b/packages/client/src/scss/_mixins.scss @@ -0,0 +1,20 @@ +@use "colors"; + +@mixin header { + display: flex; + margin-top: 1rem; + margin-left: 1.5rem; + margin-bottom: 1rem; +} + +@mixin button { + color: colors.$text; + background-color: colors.$primary-light; + padding: 8px 12px 8px 12px; + border: 0; + border-radius: 5px; + transition: background-color 0.2s ease-in-out; + &:hover { + background-color: colors.$primary; + } +}
\ No newline at end of file diff --git a/packages/client/src/scss/_variables.scss b/packages/client/src/scss/_variables.scss new file mode 100644 index 0000000..afd2347 --- /dev/null +++ b/packages/client/src/scss/_variables.scss @@ -0,0 +1,9 @@ + +$base: 0.75rem; + +$font-size-1: $base * 2.5; +$font-size-2: $base * 2; +$font-size-3: $base * 1.75; +$font-size-4: $base * 1.5; +$font-size-5: $base * 1.125; +$font-size-6: $base;
\ No newline at end of file diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue index 397a3a1..104865a 100644 --- a/packages/client/src/views/Home.vue +++ b/packages/client/src/views/Home.vue @@ -1,10 +1,10 @@ <template> - <div class="container-fluid px-0 d-flex"> + <div class="container"> <HomeHeader /> <HomeProjectsHeader /> - <div class="row mx-0"> - <div class="col ms-4 vld-parent"> - <ul id="repos" v-if="projects"> + <div class="row"> + <div id="projects" class="col vld-parent"> + <ul v-if="projects"> <li v-for="(project, project_name, index) in projects" :key="index"> <div v-if="(search !== null && project_name.includes(search)) || search == null"> <span class="fs-3"> @@ -69,33 +69,24 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; @import "~vue-loading-overlay/dist/vue-loading.css"; -#repos { - margin-top: 25px; - li { - margin-bottom: 25px; - } -} - .repo-last-updated { display: block; font-weight: 300; font-style: italic; } -ul { - list-style-type: none; - padding: 0; -} - -.container-fluid { - flex-flow: column; - height: 100vh; +#projects { + margin-left: 1.5rem; + ul { + list-style-type: none; + padding: 0; + margin-top: 25px; + li { + margin-bottom: 25px; + } + } } -.row { - height: 100%; -} </style> diff --git a/packages/client/src/views/Repository.vue b/packages/client/src/views/Repository.vue index bbadb16..24000d4 100644 --- a/packages/client/src/views/Repository.vue +++ b/packages/client/src/views/Repository.vue @@ -1,5 +1,5 @@ <template> - <div class="container-fluid px-0 d-flex"> + <div class="container"> <RepositoryHeader :name="name" :description="description" /> <RepositoryNavbar :repository="$router.currentRoute._rawValue.params.repo" :active-page="$router.currentRoute._rawValue.path.split('/')[2]" @@ -39,10 +39,3 @@ export default { } }; </script> - -<style lang="scss" scoped> -.container-fluid { - flex-flow: column; - height: 100vh; -} -</style> diff --git a/packages/client/src/views/RepositoryAbout.vue b/packages/client/src/views/RepositoryAbout.vue index 4b4d700..18855fe 100644 --- a/packages/client/src/views/RepositoryAbout.vue +++ b/packages/client/src/views/RepositoryAbout.vue @@ -1,6 +1,6 @@ <template> - <div class="row mx-0"> - <div class="col ms-4 ps-4 ps-sm-5 mt-3 fs-5 vld-parent"> + <div class="row"> + <div class="col fs-5 vld-parent"> <RepositoryTreeBlob :repository="$router.currentRoute._rawValue.params.repo" path="README.md" :content="readme" v-if="readme" /> @@ -53,6 +53,6 @@ export default { }; </script> -<style lang="scss"> +<style lang="scss" scoped> @import "~vue-loading-overlay/dist/vue-loading.css"; </style> diff --git a/packages/client/src/views/RepositoryCommit.vue b/packages/client/src/views/RepositoryCommit.vue index 97c06b0..447549b 100644 --- a/packages/client/src/views/RepositoryCommit.vue +++ b/packages/client/src/views/RepositoryCommit.vue @@ -1,10 +1,10 @@ <template> - <div class="row mx-0"> - <div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent"> + <div class="row"> + <div class="col fs-5 vld-parent"> <BaseBreadcrumb :items="[{ name: 'Log', path: '/' + $router.currentRoute._rawValue.params.repo + '/log' }]" :active-item="$router.currentRoute._rawValue.params.commit" /> <template v-if="commit"> <table - id="commit-info" class="table table-dark"> + id="commit-info"> <tbody> <tr> <td class="commit-info-title"> @@ -30,7 +30,7 @@ v-for="(patch, index) in commit['patches']" :key="index" class="commit-patch"> <div class="commit-patch-header"> - <span class="fw-bold">{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span> + <span>{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span> <span v-if="patch.to === '/dev/null'">Deleted</span> <div class="commit-patch-add-del"> <span>+{{ patch.additions }}</span> @@ -90,23 +90,8 @@ export default { <style lang="scss"> @use "../scss/colors"; -@import "../scss/bootstrap"; - -@import "~bootstrap/scss/tables"; - -@import "~vue-loading-overlay/dist/vue-loading.css"; @import "~highlight.js/scss/srcery.scss"; -#commit-info { - margin-bottom: 2rem; - tbody tr { - td { - padding: 0px; - padding-right: 10px; - } - } -} - .commit-patch { margin-bottom: 50px; table { @@ -136,25 +121,6 @@ export default { } } } - -.commit-patch-header { - display: flex; - background-color: lighten(#000000, 14%); - padding: 10px; - span { - margin-right: 30px; - &:nth-child(2) { - color: colors.$danger; - } - } -} - -.commit-info-title { - color: colors.$secondary; - padding-right: 30px; - width: 20px; -} - .patch-too-large { font-weight: 600; } @@ -194,11 +160,7 @@ code { word-wrap: anywhere; } -.row { - height: 100%; -} - -@include media-breakpoint-down(sm) { +@media (max-width: 576px) { .commit-patch table tbody tr td { padding-left: 4px; &:nth-child(2) { @@ -210,3 +172,45 @@ code { } } </style> + +<style lang="scss" scoped> +@use "../scss/colors"; + +@import "~vue-loading-overlay/dist/vue-loading.css"; + +#commit-info { + margin-bottom: 2rem; + tbody tr { + td { + padding: 0px; + padding-right: 10px; + } + } +} + +.commit-patch-header { + display: flex; + background-color: lighten(#000000, 14%); + padding: 10px; + span { + margin-right: 30px; + &:nth-child(1) { + font-weight: 700; + } + &:nth-child(2) { + color: colors.$danger; + } + } +} + +.commit-info-title { + color: colors.$secondary; + padding-right: 30px; + width: 20px; +} + +.row { + height: 100%; +} + +</style> diff --git a/packages/client/src/views/RepositoryLog.vue b/packages/client/src/views/RepositoryLog.vue index 3b6248c..91d1cfc 100644 --- a/packages/client/src/views/RepositoryLog.vue +++ b/packages/client/src/views/RepositoryLog.vue @@ -1,24 +1,24 @@ <template> - <div class="row mx-0 vld-parent flex-fill"> - <div class="col ms-4 ps-4 ps-sm-5 mt-3"> + <div class="row vld-parent"> + <div id="log" class="col"> <table - id="log" class="table table-dark fs-5" + class="fs-5" v-if="commits"> <thead> <tr> - <th class="text-secondary"> + <th> Subject </th> - <th class="text-secondary"> + <th> Author </th> - <th class="text-secondary"> + <th> Date </th> - <th class="text-secondary"> + <th> Files </th> - <th class="text-secondary"> + <th> Del/Add </th> </tr> @@ -88,30 +88,44 @@ export default { @use "../scss/colors"; @import "~vue-loading-overlay/dist/vue-loading.css"; -@import "../scss/bootstrap"; @import "../scss/fonts"; -@import "~bootstrap/scss/tables"; - -#log { +table { border-spacing: 0; - tbody tr { - &:hover { - --bs-table-bg: 0; - background-color: lighten(colors.$background, 5%); - } - td { - padding-bottom: 1em; + width: 100%; + margin-bottom: 1rem; + tbody { + vertical-align: inherit; + tr { + &:hover { + --bs-table-bg: 0; + background-color: lighten(colors.$background, 5%); + } + td { + padding-bottom: 1em; + } } } + thead { + vertical-align: bottom; + } th { text-align: start; padding-bottom: 1em; + color: colors.$secondary; + } + > :not(caption) > * > * { + padding: 0.2rem 1rem; + border-bottom-width: 1px; } } -@include media-breakpoint-down(sm) { - .table > :not(caption) > * > * { +#log { + padding-left: 0; +} + +@media (max-width: 576px) { + table > :not(caption) > * > * { padding: 0.1rem; } } diff --git a/packages/client/src/views/RepositoryTree.vue b/packages/client/src/views/RepositoryTree.vue index 898b12c..b14c4e4 100644 --- a/packages/client/src/views/RepositoryTree.vue +++ b/packages/client/src/views/RepositoryTree.vue @@ -1,6 +1,6 @@ <template> - <div class="row mx-0"> - <div class="col ms-4 ps-4 ps-sm-5 mt-3 fs-5 vld-parent"> + <div class="row"> + <div class="col fs-5 vld-parent"> <BaseBreadcrumb :items="(pathArr.length === 0) ? [] : [{ name: $router.currentRoute._rawValue.params.repo, path: '/' + $router.currentRoute._rawValue.params.repo + '/tree' }].concat(pathArr.slice(0, -1).map((path_part, index) => { @@ -102,8 +102,4 @@ export default { <style lang="scss" scoped> @import "~vue-loading-overlay/dist/vue-loading.css"; - -.row { - height: 100%; -} </style> |