minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-28 19:42:10 +03:00
Code Activity

UI enhancements: Nav active state, Copy button UI and Text colors (#524)

Browse Source 
* Update footer text color

* Add hover color for nav links

* Update the copy button UI

* Add active class on content nav based on platform
This commit is contained in:
Rushan
2022-08-15 21:11:36 +04:00
committed by GitHub
parent 2376fa9924
commit dc454d7246
7 changed files with 73 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
source/_static/scss/includes/_alert.scss
View File

@ -42,7 +42,8 @@ div.admonition {
background-color: var(--alert-#{$variant}-bg);
code,
div.highlight pre {
.copybtn,
.highlight pre {
background-color: var(--alert-#{$variant}-code-bg);
color: var(--alert-#{$variant}-color);
}

3
source/_static/scss/includes/_footer.scss
View File

@ -4,9 +4,8 @@ div.footer {
width: 100%;
margin: 0;
&, a {
color: $white;
color: var(--footer-color);
}
a {

47
source/_static/scss/includes/_misc.scss
View File

@ -215,3 +215,50 @@
line-height: 100%;
margin: -0.2rem 0 1rem;
}
// -----------------------------
// Copy button
// -----------------------------
button.copybtn {
border-radius: $border-radius-sm;
top: 0.1;
right: 0rem;
border: 0;
background-color: transparent;
width: auto;
font-family: $font-family-base;
font-size: 0.7rem;
display: flex;
align-items: center;
padding: 0.75rem;
font-weight: $font-weight-medium;
cursor: pointer;
&:hover {
background-color: transparent !important;
&:after {
opacity: 1;
}
}
& > img {
display: none;
}
&:after {
all: revert;
transform: none !important;
transition-delay: 0ms !important;
transition: opacity 300ms;
opacity: 0.75;
content: "Copy";
}
&.success {
&:after {
content: "Copied";
}
}
}

7
source/_static/scss/includes/_nav.scss
View File

@ -157,10 +157,11 @@
.nav__link {
padding: 0.5rem 0 0.6rem;
cursor: pointer;
&,
&:hover {
color: var(--nav-text-color);
transition: color 300ms;
&:hover {
color: $white;
}
& > span {

1
source/_static/scss/includes/_theme.scss
View File

@ -93,6 +93,7 @@ $theme-properties: (
// Footer
--footer-bg: #1D1D1D #151c24,
--footer-color: $white $text-dark-color,
// Icon
--icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200,

24
source/_templates/content-navigation.html
View File

@ -1,31 +1,31 @@
<div class="content__nav">
<div class="container">
<nav class="content__nav__inner">
<a href="" class="active" data-content-nav="cn-kubernetes">
<a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/k8s/html/index.html" class="{{ 'active' if doc_platform == 'kubernetes' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" />
Kubernetes
</a>
<a href="" data-content-nav="cn-docker">
<a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/container/html/index.html" class="{{ 'active' if doc_platform == 'container' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker.svg',1) }}" alt="Docker" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/docker-inactive.svg',1) }}" alt="Docker" />
Docker
</a>
<a href="" data-content-nav="cn-linux">
<a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/linux/html/index.html" class="{{ 'active' if doc_platform == 'linux' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux.svg',1) }}" alt="Linux" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/linux-inactive.svg',1) }}" alt="Linux" />
Linux
</a>
<a href="" data-content-nav="cn-macos">
<a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/macos/html/index.html" class="{{ 'active' if doc_platform == 'macos' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos.svg',1) }}" alt="macOS" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/macos-inactive.svg',1) }}" alt="macOS" />
macOS
</a>
<a href="" data-content-nav="cn-windows">
<a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/windows/html/index.html" class="{{ 'active' if doc_platform == 'windows' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows.svg',1) }}" alt="Windows" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/windows-inactive.svg',1) }}" alt="Windows" />
Windows
@ -38,10 +38,11 @@
</nav>
</div>
<!--
<div class="content__nav__dropdown">
<div class="container">
<nav id="cn-kubernetes" class="active">
<a class="active" href="">Upstream</a>
<nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}">
<a href="">Upstream</a>
<a href="">Redhat Openshift</a>
<a href="">VMware Tanzu</a>
<a href="">SUSE Rancher</a>
@ -51,28 +52,28 @@
<a href="">Others</a>
</nav>
<nav id="cn-docker">
<nav id="cn-docker" class="{{ 'active' if doc_platform == 'container' }}">
<a href="">docker-1</a>
<a href="">docker-2</a>
<a href="">docker-3</a>
<a href="">docker-4</a>
</nav>
<nav id="cn-linux">
<nav id="cn-linux" class="{{ 'active' if doc_platform == 'linux' }}">
<a href="">linux-1</a>
<a href="">linux-2</a>
<a href="">linux-3</a>
<a href="">linux-4</a>
</nav>
<nav id="cn-macos">
<nav id="cn-macos" class="{{ 'active' if doc_platform == 'macos' }}">
<a href="">macos-1</a>
<a href="">macos-2</a>
<a href="">macos-3</a>
<a href="">macos-4</a>
</nav>
<nav id="cn-windows">
<nav id="cn-windows" class="{{ 'active' if doc_platform == 'windows' }}">
<a href="">windows-1</a>
<a href="">windows-2</a>
<a href="">windows-3</a>
@ -80,4 +81,5 @@
</nav>
</div>
</div>
-->
</div>

4
source/default-conf.py
View File

@ -262,6 +262,10 @@ html_extra_path = [ 'extra']
html_title = 'MinIO Object Storage for ' + platform.capitalize()
html_context = {
'doc_platform': platform.lower()
}
# -- Options for Sphinx Tabs -------------------------------------------------
sphinx_tabs_disable_css_loading = True