Skip to content

Commit

Permalink
chore: partial static website design
Browse files Browse the repository at this point in the history
  • Loading branch information
@steve-lebleu
steve-lebleu committed Mar 8, 2024
1 parent 3877a41 commit b4dee8c
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 49 deletions.
31 changes: 26 additions & 5 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@

<head lang="en">

<title>jQuery auto-complete plugin - Kompleter.js</title>
<title>Auto-complete plugin - Kompleter.js</title>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->

<link href='https://fonts.googleapis.com/css?family=Lato|Open+Sans|Montserrat' rel='stylesheet' type='text/css' />
<link href="css/kompleter.min.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->

<script src="./js/kompleter.min.js"></script>
Expand All @@ -26,7 +27,20 @@

<body>

<div id="wrapper">
<header>
<p style="text-align: center;"><a href="">Documentation</a></p>

<a href="https://github.com/steve-lebleu/kompleter.js" target="_blank" class="github-corner" aria-label="View source on Github">
<svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
</header>

<hgroup>
<h1>Kømpletr</h1>
<cite>10kb of vanilla lightweight to add highly featured and eco friendly autocomplete on your pages.</cite>
</hgroup>

<div id="searcher" class="form--search">
<input
type="text"
name="auto-complete"
Expand All @@ -40,6 +54,13 @@
data-fields="Name,CountryCode,Population" />
</div>

<footer>
<p>
© 2017 Konfer
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Kømpletr.js</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br>Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.konfer.be" rel="cc:morePermissions">https://www.konfer.be</a>.
</p>
</footer>

<script type="text/javascript">
function ready(fn) {
if (document.readyState !== 'loading') {
Expand Down Expand Up @@ -81,7 +102,7 @@
'CountryCode',
'Population'
],

maxResults: 5,
propToMapAsValue: 'Name'
};

Expand Down
4 changes: 2 additions & 2 deletions src/js/vanilla/kompleter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1049,7 +1049,7 @@
let html = '';

if(kompleter.props.dataSet && kompleter.props.dataSet.length) {
for(let i = 0; i < kompleter.props.dataSet.length && i <= kompleter.options.maxResults; i++) {
for(let i = 0; i < kompleter.props.dataSet.length && i <= kompleter.options.maxResults - 1; i++) {
if(typeof kompleter.props.dataSet[i] !== 'undefined') {
html += `<div id="${i}" class="item--result ${i + 1 === kompleter.props.dataSet.length ? 'last' : ''}">`;
switch (typeof kompleter.props.dataSet[i]) {
Expand Down Expand Up @@ -1118,7 +1118,7 @@
kompleter.htmlElements.result = kompleter.utils.build('div', [ { id: 'kpl-result' }, { class: 'form--search__result' } ]);

kompleter.htmlElements.wrapper = kompleter.htmlElements.input.parentElement;
kompleter.htmlElements.wrapper.setAttribute('class', 'kompleter');
kompleter.htmlElements.wrapper.setAttribute('class', `${kompleter.htmlElements.wrapper.getAttribute('class')} kompletr`);
kompleter.htmlElements.wrapper.appendChild(kompleter.htmlElements.result);

// 4. Listeners
Expand Down
37 changes: 20 additions & 17 deletions src/sass/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
// Completer inputs variables
$color_0: #333;
$color_1: #dfdfdf;
$color_2: #fff;
$color_3: #f2f2f2;
$color_4: #637c8e;
$color_5: #c0c0c0;
$color_10: #435A6B;
$color_11: #BBBE64;
$color_12: #e2e2e2;
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Thasadith');

// Demo inputs variables
$color_6: lighten(#1e1e1e, 5%);
$color_7: #89867E;
$color_8: #666;
$color_9: #777;
////
/// Colors variables
////

$color-1: #ffffff;
$color-2: #c0c0c0;
$color-3: #dfdfdf;
$color-4: #777;
$color-5: #666;
$color-6: #333;

$font-base: 'Open Sans', Helvetica, Geneva, Tahoma, sans-serif;
$font-alt: 'Montserrat', Helvetica, Geneva, Tahoma, sans-serif;
////
/// Fonts variables
////

$font-title: 'Thasadith', sans-serif;
$font-base: 'Open Sans', sans-serif;

$font-size-base: 14px;
106 changes: 81 additions & 25 deletions src/sass/kompleter.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,66 @@
@import url('https://fonts.googleapis.com/css?family=Thasadith');

@import 'mixins';
@import 'variables';

/* Module code */
/* Demo code */

.kompleter {
.form--search {
margin: 0;
padding: 0;
html {
font-size: $font-size-base;
}

.github-corner {
border-bottom: 0;
position: fixed;
right: 0;
text-decoration: none;
top: 0;
z-index: 1;
& svg {
color: #fff;
fill: #333;
fill: var(--theme-color, #333);
height: 80px;
width: 80px;
}

.form--light-search {
}

body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
font-family: $font-base;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(133,255,189,1) 50%, rgba(255,251,125,1) 100%);
}

hgroup {
text-align: center;
margin: 0 auto 40px auto;
}

h1 {
font-family: $font-title;
font-size: 7rem;
margin: 3rem auto 0 auto;
}

a {
color: #333;
}

footer {
color: #333;
text-align: center;
margin-top: auto;
}
////
// Module code
////

.kompletr {

&.form--search {
width: 30%;
position: relative;
margin: 0 auto;
Expand All @@ -27,26 +77,26 @@

.input--search {
display: block;
box-sizing: border-box;
margin: 0 auto;
padding: 15px 10px;
width: 100%;
min-width: 240px;
max-width: 600px;
height: auto;
font-size: 1.5rem;
font-size: 1.2rem;
line-height: 1.5;
color: $color_9;
padding: 15px 10px;
color: $color-4;
border: none;
background: $color_2;
margin: 0 auto;
box-sizing: border-box;
background: $color-1;
&:focus {
border: none;
outline: none;
}
}

::placeholder {
color: $color_5;
color: $color-2;
}

.form--search__result {
Expand All @@ -57,35 +107,41 @@

/* Block one item result */
.item--result {
box-sizing: border-box;
width: 100%;
background: $color_2;
border-bottom: 1px dashed $color_1;
padding: 15px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-bottom: 1px dashed $color-3;
border-left: none;
border-right: none;
padding: 15px;
color: $color_0;
box-sizing: border-box;
color: $color-6;

&.last, &:last-child {
border-bottom: none;
}

&:hover, &.focus {
cursor: pointer;
color: $color_8;
background: $color_11;
backdrop-filter: blur(26px) saturate(120%);
-webkit-backdrop-filter: blur(26px) saturate(120%);
background-color: rgba(255, 255, 255, 0.50);
color: $color-5;
@include transition(0.2s ease-in-out);
& .data-1, & .data-2 {
color: $color_3;
color: $color-5;
}
}
& .data-0 {
float: left;
color: $color_8;
color: $color-5;
margin: 0 0 3px 0;
font-weight: 600;
}
& .data-1, & .data-2 {
display: block;
color: $color_5;
color: $color-2;
font-weight: normal;
}
& .data-1 {
Expand Down

0 comments on commit b4dee8c

Please sign in to comment.