Commit dc7ea7e1 authored by Jarek Ostrowski's avatar Jarek Ostrowski

Merge branch '3621-search-page' into 'master'

Resolve "Create search page"

Closes #3621

See merge request !17856
parents b383aaec f69eace0
Pipeline #42585042 passed with stages
in 12 minutes and 49 seconds
(function() {
var animatedIcons = document.getElementsByClassName('animation-icon');
for (var i = 0; i < animatedIcons.length; i++) {
var randomDelay = Math.random().toFixed(1) * 10;
animatedIcons[i].style.animationDelay = randomDelay + 's';
}
})();
---
layout: default
title: Search GitLab
suppress_header: true
extra_css:
- search.css
extra_js:
- search-page.js
---
.animation-icon-container
- Gitlab::Homepage::Stage.all!.select{|stage| stage.dept!="enablement"}.each do |stage|
.animation-icon
= partial "/includes/icons/sdlc-icons/#{stage.key}.svg"
.gitlab-content-container
.search-container
%h3 👋 Hello, how can we help?
.search-box-large.js-search-box
%i.fas.fa-search.search-icon
%input.js-search{ type: "text", placeholder: "What are you looking for?", autofocus: "" }
.relevant-links
%h5
Here are some useful links
.relevant-links-container.flex-wrap-md
.links
%a{ href: "https://docs.gitlab.com/" } Search the docs
%a{ href: "/solutions/open-source/projects/" } Open source projects
.links
%a{ href: "https://gitlab.com/explore" } Search gitlab.com
%a{ href: "/product/" } Product
.links
%a{ href: "/jobs/" } Jobs
%a{ href: "/sales/" } Contact sales
......@@ -2,6 +2,7 @@ $color-white: #fff;
$color-white-alt: #d9ccff;
$color-transparent: rgba(0, 0, 0, 0);
$color-transparent-alt: rgba(0, 0, 0, .1);
$color-transparent-alt-darken: rgba(0, 0, 0, .2);
$color-transparent-alt-light: rgba(0, 0, 0, .05);
$color-transparent-alt-dark: rgba(0, 0, 0, .8);
$color-transparent-white: rgba(255, 255, 255, 0);
......@@ -181,6 +182,7 @@ $reseller-category-active-background-color: rgba(255, 255, 255, .4);
$applications-search-box-shadow-color: rgba($color-dark, .5);
$box-shadow: 0 2px 4px $color-transparent-alt;
$box-shadow-darken: 0 2px 4px $color-transparent-alt-darken;
$box-shadow-large: 0 20px 40px $color-transparent-alt;
$gitlab-live-gradient-dark: #0a021e;
......
@import "vendor/bootstrap/bootstrap/variables";
@import "variables";
@keyframes fadeAnimatedIcon {
from {
opacity: .3;
}
to {
opacity: 0;
transform: translateY(400px);
}
}
.animation-icon-container {
position: absolute;
width: calc(100% - 40px);
left: 20px;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
.animation-icon {
height: 30px;
opacity: 0;
animation: fadeAnimatedIcon 12s linear forwards infinite;
svg {
height: 100%;
fill: $color-primary;
pointer-events: none;
}
@media all and (max-width: $screen-sm-min) {
display: none;
}
}
@media all and (max-width: $screen-sm-min) {
display: none;
}
}
.search-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h3 {
z-index: 1;
}
.search-box-large {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 500px;
width: 100%;
margin-top: 20px;
.search-icon {
position: absolute;
left: 20px;
font-size: 15px;
color: $color-gray;
}
input {
width: 100%;
appearance: none;
border: 0;
border-radius: $border-radius-large;
background: $color-white;
box-shadow: $box-shadow;
padding: $input-padding-large;
padding-left: 48px;
&:active,
&:focus {
outline: 0;
box-shadow: $box-shadow-darken;
}
}
}
}
.relevant-links {
margin: auto;
margin-top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 80%;
.relevant-links-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.links {
width: 100%;
display: flex;
flex-direction: column;
text-align: center;
margin: 10px 20px;
a {
padding: 10px;
}
}
}
}
Markdown is supported
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