Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Dan top nav sticky#743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
chillenberger merged 11 commits intomasterfromdan-top-nav-sticky
Jun 15, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
11 commits
Select commitHold shift + click to select a range
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletionspgml-dashboard/static/css/scss/abstracts/variables.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,6 +28,11 @@ $violet-shade-100: #A105FF;
// Neon Scale
$neon-tint-100: #5162FF;
$neon-tint-200: #6271FF;
$neon-tint-300: #7381FF;

$neon-shade-100: #5162FF;
$neon-shade-200: #4858E5;
$neon-shade-300: #404ECC;

// Teal Scale
$teal-tint-100: #00E0FF;
Expand DownExpand Up@@ -99,6 +104,7 @@ $badge-font-size: 0.65em;

// Navbar
$navbar-nav-link-padding-x: 1rem;
$navbar-height: 88px;

// Nav Tabs
$nav-link-transition: none;
Expand All@@ -107,6 +113,7 @@ $nav-tabs-border-radius: 0px;
$nav-underline-border-width: 2px;
$nav-tabs-link-active-color: #{$gray-100};
$nav-tabs-link-active-bg: transparent;
$nav-pills-border-radius: calc(#{$border-radius} / 2);

//Grid
$enable-cssgrid: true;
Expand Down
2 changes: 1 addition & 1 deletionpgml-dashboard/static/css/scss/base/_base.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -110,7 +110,7 @@ table {
}

html, body, main {
height:100%;
height:fit-content;
}

article {
Expand Down
27 changes: 26 additions & 1 deletionpgml-dashboard/static/css/scss/components/_badges.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,37 @@
// Center badge content
.badge {
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
}

.beta-badge {
@extend .badge;
text-transform: uppercase;
color: #{$pink};
}

.github-badge {
$color: $neon-shade-100;
padding: 4px;

p {
margin: 0px;
background: #{$color};
border-radius: calc($border-radius / 2);
padding: 4px;
font-size: 0.8rem;
font-weight: 500;
}

// Add right pointing arrow
&::after {
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;

border-left: 5px solid #{$color};
}
}
18 changes: 2 additions & 16 deletionspgml-dashboard/static/css/scss/components/_buttons.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
.btn {
--bs-btn-border-radius: var(--bs-border-radius-pill);
--bs-btn-padding-x: 22px;
--bs-btn-padding-y: 12px; // Need to decrease from style because border radius gets in the way.
--bs-btn-padding-y: 12px;

display: flex;
justify-content: center;
Expand DownExpand Up@@ -108,19 +107,6 @@
}

.btn-search {
padding: 10px 14px;
min-width: 10rem;
color: #{$hp-white};
background-color: transparent;
border-radius: var(--bs-border-radius-pill);
border: 2px solid #{$gray-600};

&:hover {
cursor: text;
border: 2px solid #{$gray-400};
}

@include media-breakpoint-down(lg) {
width: 100%;
}
border: none;
}
44 changes: 36 additions & 8 deletionspgml-dashboard/static/css/scss/components/_navs.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
.sticky-top-nav{
height: $navbar-height;
position: sticky;
top: 0px;
z-index: $zindex-sticky;
}

.navbar {
--bs-navbar-padding-y:0;
--bs-navbar-padding-y:24px;
--bs-navbar-padding-x: 24px;
border: 1px solid rgba(33, 33, 35, 0.5);
--bs-nav-link-font-weight: 500;

&.horizontal {
--bs-navbar-padding-x: 1.25rem;
--bs-navbar-padding-y: 1.25rem;
border-radius: var(--bs-border-radius-pill);
@include media-breakpoint-down(lg) {
border-radius: 12px;
min-height: $navbar-height;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);

@include media-breakpoint-up(lg) {
height: $navbar-height;
}

&.pinned {
background: #{$gray-900};
}

.nav-link {
--bs-nav-link-padding-y: 0px;
--bs-nav-link-padding-x: 0px;

border-bottom: 1px solid transparent;

&:active {
border-bottom: 1px solid #{$slate-tint-500};
}
}
}

.nav-link {
--bs-nav-link-padding-y: 16px;
--bs-nav-link-font-weight: 500;
--bs-nav-link-padding-x: 24px;
--bs-nav-pills-border-radius: 4px;
}

.nav {
Expand DownExpand Up@@ -61,6 +82,10 @@
}
}

.navbar-expanded {
background-color: #{$gray-900} !important;
}

.offcanvas-body {
--bs-offcanvas-padding-x: 0;
}
Expand DownExpand Up@@ -136,4 +161,7 @@
transform: rotate(-90deg);
}
}
@include media-breakpoint-down(xxl) {
border-radius: 0px;
}
}
15 changes: 13 additions & 2 deletionspgml-dashboard/static/css/scss/layout/_containers.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -86,7 +86,7 @@
@extend .z-1;

position: sticky;
top:0;
top:$navbar-height;
height: 2.5rem;
overflow: visible;

Expand All@@ -110,6 +110,7 @@
@include media-breakpoint-up(xxl) {
height: 100%;
max-height: 80vh;
top: calc($navbar-height + $spacer);

.collapse {
height: 100%;
Expand All@@ -123,4 +124,14 @@
font-size: 4rem;
font-weight: 700;
line-height: 80px;
}
}

.container>.sticky-top-nav, .container-fluid>.sticky-top-nav {
margin-left: calc(var(--bs-gutter-x) * -0.5);
margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.tuck-under-navbar {
margin-top: -$navbar-height;
padding-top: $navbar-height;
}
19 changes: 13 additions & 6 deletionspgml-dashboard/static/css/scss/themes/dark.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -78,15 +78,22 @@
background: #151516;

.nav-link {
--bs-nav-link-color: #{$gray-300};
--bs-nav-link-hover-color: #{$gray-100};
--bs-nav-link-color: #{$gray-100};
--bs-nav-link-hover-color: #{$purple};

&:hover {
text-shadow: 0 0 .65px white, 0 0 .65px white; //change font weight without element resizing
}
&:hover {
text-shadow: 0 0 .65px #{$purple}, 0 0 .65px #{$purple}; //change font weight without element resizing

path {
fill: var(--bs-nav-link-hover-color);
}
}

&:active {
color: #{$gray-200};
color: #{$slate-tint-500};
path {
fill: #{$slate-tint-500};
}
}
}
}
Expand Down
16 changes: 9 additions & 7 deletionspgml-dashboard/static/js/btn-secondary.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,8 +47,10 @@ export default class extends Controller {
drawBorder(btn, canvas) {
let btnMarginX = 22
let btnMarginY = 12
let borderRadius = 8;
let width = btn.offsetWidth
let height = btn.offsetHeight


canvas.width = width
canvas.height = height
Expand All@@ -59,13 +61,13 @@ export default class extends Controller {

// Draw border compensating for border thickenss
var ctx = canvas.getContext("2d")
ctx.moveTo(height/2-1, 1)
ctx.lineTo(width-height/2-1, 1)
ctx.arcTo(width-1, 1, width-1,height/2-1,height/2-1)
ctx.arcTo(width-1, height-1, width-height/2-1, height-1,height/2-1)
ctx.lineTo(height/2-1, height-1)
ctx.arcTo(1, height-1, 1,height/2-1,height/2-1)
ctx.arcTo(1, 1,height/2-1, 1,height/2-1)
ctx.moveTo(borderRadius, 1)
ctx.lineTo(width-borderRadius-1, 1)
ctx.arcTo(width-1, 1, width-1,borderRadius-1,borderRadius-1)
ctx.arcTo(width-1, height-1, width-borderRadius-1, height-1,borderRadius-1)
ctx.lineTo(borderRadius-1, height-1)
ctx.arcTo(1, height-1, 1,borderRadius-1,borderRadius-1)
ctx.arcTo(1, 1,borderRadius-1, 1,borderRadius-1)

var gradient = ctx.createLinearGradient(0, canvas.height, canvas.width, 0)
gradient.addColorStop(0, "rgb(217, 64, 255)");
Expand Down
22 changes: 12 additions & 10 deletionspgml-dashboard/static/js/search.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,36 @@ import {

export default class extends Controller {
static targets = [
'searchInput',
'searchModal',
'searchTrigger',
'searchFrame',
]

connect() {
this.searchModalTarget.addEventListener('shown.bs.modal', this.focusSearchInput)
this.searchModalTarget.addEventListener('hidden.bs.modal', this.updateSearch)
this.target = document.getElementById("search");
this.searchInput = document.getElementById("search-input");
this.searchFrame = document.getElementById("search-results")

this.target.addEventListener('shown.bs.modal', this.focusSearchInput)
this.target.addEventListener('hidden.bs.modal', this.updateSearch)
this.searchInput.addEventListener('input', (e) => this.search(e))
}

search(e) {
const query = e.currentTarget.value
this.searchFrameTarget.src = `/docs/search?query=${query}`
this.searchFrame.src = `/docs/search?query=${query}`
}

focusSearchInput = (e) => {
this.searchInputTarget.focus()
this.searchInput.focus()
this.searchTriggerTarget.blur()
}

updateSearch = () => {
this.searchTriggerTarget.value = this.searchInputTarget.value
this.searchTriggerTarget.value = this.searchInput.value
}

openSearch = (e) => {
new bootstrap.Modal(this.searchModalTarget).show()
this.searchInputTarget.value = e.currentTarget.value
new bootstrap.Modal(this.target).show()
this.searchInput.value = e.currentTarget.value
}

disconnect() {
Expand Down
45 changes: 45 additions & 0 deletionspgml-dashboard/static/js/topnav-styling.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
import {
Controller
} from '@hotwired/stimulus'

export default class extends Controller {
initialize() {
this.pinned_to_top = false;
}

connect() {
this.act_when_scrolled();
this.act_when_expanded();
}

act_when_scrolled() {
// check scroll position in initial render
if( window.scrollY > 48) {
this.pinned_to_top = true;
this.element.classList.add("pinned");
}

addEventListener("scroll", (event) => {
if (window.scrollY > 48 && !this.pinned_to_top) {
this.pinned_to_top = true;
this.element.classList.add("pinned");
}

if (window.scrollY < 48 && this.pinned_to_top) {
this.pinned_to_top = false;
this.element.classList.remove("pinned");
};
})
}

// Applies a class when navbar is expanded, used in mobile view for adding background contrast.
act_when_expanded() {
addEventListener('show.bs.collapse', () => {
this.element.classList.add('navbar-expanded');
})
addEventListener('hidden.bs.collapse', () => {
this.element.classList.remove('navbar-expanded');
})
}

}
6 changes: 6 additions & 0 deletionspgml-dashboard/templates/components/github_icon.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
<span class="badge github-badge"><p>Stars | 3.3K</p></span>
<svg width="35" height="35" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
</svg>
</a>
2 changes: 1 addition & 1 deletionpgml-dashboard/templates/components/search_modal.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
<div class="modal modal-xl" tabindex="-1"data-search-target="searchModal" id="search">
<div class="modal modal-xl" tabindex="-1" id="search">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Expand Down
4 changes: 4 additions & 0 deletionspgml-dashboard/templates/content/article.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
<% use crate::utils::config::standalone_dashboard; %>

<article class="docs col-12 col-xxl-8 col-xl-9 overflow-x-auto py-4 px-xl-5 order-3 order-xxl-2">
<%- content %>

Expand All@@ -6,11 +8,13 @@ <h2 class="h2 mb-3">Have Questions?</h2>
<p><a href="https://discord.gg/DmyJP3qJ7U">Join our Discord</a> and ask us anything! We're friendly and would love to talk about PostgresML.</p>
</div>

<% if !standalone_dashboard() { %>
<div class="mt-5 pb-3">
<h2 class="h2 mb-3">Try It Out</h2>
<p>Try PostresML using our <strong>free</strong> serverless cloud. It comes with GPUs, 5 GiB of space and plenty of datasets to get you started.</p>
<div class="d-flex justify-content-center gap-2 pt-3 pb-4">
<a class="btn btn-primary" href="<%- crate::utils::config::signup_url() %>">Get Started</a>
</div>
</div>
<% } %>
</article>
Loading
[8]ページ先頭
©2009-2025 Movatter.jp