Skip to content

Commit

Permalink
Deploy rebelstackio/prettyComponents to github.com/rebelstackio/prett…
Browse files Browse the repository at this point in the history 
…yComponents.git:gh-pages
  • Loading branch information
@traviscibot
traviscibot committed Jan 30, 2020
0 parents commit 59cde38
Show file tree
Hide file tree
Showing 28 changed files with 8,505 additions and 0 deletions.
187 changes: 187 additions & 0 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
.demo-box {
border: 1px solid #d3d3d3;
padding: 1em 1em 1.5em 1em;
border-radius: 3px;
background-color: #ffffff;
position: relative;
max-width: 80vw;
box-sizing: border-box;
}

.props {
margin-top: .5em;
color: #666;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.props > h4 {
border-bottom: 1px solid sandybrown;
grid-area: 1 / 1 / span 1 / span 4;
}

.props > div > h5 {
padding: 10px 0;
}

.props > div > div {
margin: 5px 1px;
padding: .2em .4em;
font-size: .9em;
background: #f2f4f5;
border: 1px solid #eee;
border-radius: 3px;
width: fit-content;
}

body, html {
height: 100%;
}

body {
background: #303030;
}

.demo-head {
font-style: italic;
padding: .5em;
color: #ffffff;
background: #e91e63;
margin-bottom: 10px;
display: grid;
grid-template-columns: 64px 1fr 35px;
column-gap: 10px;
position: fixed;
width: 99vw;
z-index: 100000;
top: 0;
}

.demo-head > * {
align-self: center;
}

.demo-head > img {
background-color: rgba(255,255,255,.3);
border-radius: 50%;
}

.demo-layout {
display: grid;
grid-template-columns: 1fr;
border-radius: 0 0 4px 0;
grid-row-gap: 10px;
padding-top: 85px;
height: 100%;
box-sizing: border-box;
}
.demo-layout > *{
place-self: center;
width: 79%;
height: 90%;
}

.basic-dropdown .props {
grid-template-columns: 1fr 1fr;
}

pretty-input > div{
margin-bottom: 10px;
}

.demo-box p {
font-size: 12px;
text-align: start;
}

.example {
display: grid;
justify-content: center;
font-size: 26px;
position: absolute;
right: 10px;
bottom: 10px;
}

.example > svg {
cursor: pointer;
transition: all .3s;
}

.example > svg:hover {
transform: scale(1.2,1.2) rotate(3deg);
box-shadow: 2px 2px 5px var(--border-color);
border-radius: 50%;
}

.basic-tag > .static-tags {
display: grid;
grid-template-columns: 1fr 1fr;
}

.basic-tag > .selectable {
display: grid;
grid-auto-flow: column;
}

.basic-tag > .dynamic-tags {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
position: relative;
}
.demo-gh {
place-self: center;
}
.demo-gh > svg {
font-size: 24px;
transition: all .3s ease-in;
opacity: .7;
cursor: pointer;
}

.demo-gh > svg:hover {
transform: scale(1.2, 1.2);
opacity: 1;
}

.protrait-only {
display: none;
}

.basic-collapse.demo-box {
width: 450px;
}

.inp-num-demo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.inp-num-demo label {
font-size: 12px;
}

.modal-img {
display: grid;
}

.modal-img > img {
place-self: center;
width: 100px;
height: auto;
padding: 10px;
border-radius: 50%;
background-color: rgba(255,255,255, .5);
}

.starting {
padding: 15px;
background-color: #ffffff;
border-radius: 3px;
max-width: 80vw;
box-sizing: border-box;
}

.hidden {
display: none;
}
14 changes: 14 additions & 0 deletions css/responsive.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@media only screen and (max-width: 600px) {
.protrait-only {
display: block !important;
}
.landscape-only {
display: none;
}
.props {
grid-template-columns: 1fr 1fr;
}
.props > h4 {
grid-area: 1 / 1 / span 1 / span 2;
}
}
Binary file added img/c269f4b54361d5a415a6491cdf3e7e98-15.png.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/c269f4b54361d5a415a6491cdf3e7e98.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 125 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" content="Pretty Components">
<meta property="og:image" content="https://res.cloudinary.com/dvv4qgnka/image/upload/v1574877548/prettyOG.png">
<meta property="og:description" content="Styled WebComponents">
<meta property="og:url" content="https://rebelstackio.github.io/prettyComponents/index.html">
<meta name="twitter:card" content="summary_large_image">
<title>&lt;Pretty/&gt;</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.demo-head > .demo-gh').addEventListener('click',
() => {
window.open('https://github.com/rebelstackio/prettyComponents','_blank');
})
window.storage.on('change-view', (action) => {
const root = document.location.pathname;
document.querySelector('pretty-template')
.setAttribute('src', root + action.data)
})
});

</script>
<!--<script src="./js/codepen.js"></script>
<script src="./js/tags.js"></script>-->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">
<link rel="icon" type="image/png" href="./img/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/atom-one-dark.min.css">
</head>
<body>
<div class="demo-head">
<img src="./img/c269f4b54361d5a415a6491cdf3e7e98.gif">
<h1 class="landscape-only">&lt;Pretty-components/&gt;</h1>
<h1 class="protrait-only">&lt;Pretty/&gt;</h1>
<div class="demo-gh">
<i class="fab fa-github"></i>
</div>
</div>
<pretty-menu offset-top="80">
<pretty-menu-item
action="change-view"
action-data="views/default/index.html"
selected
icon="fas fa-home">
<div>
Home
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/button/"
>
<div id="p-btns">
Buttons
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/dropdown/"
>
<div id="p-dropdown">
Dropdowns
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/input/"
>
<div id="p-input">
Inputs
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/inputnumber/"
>
<div id="p-inputnumber">
Input Number
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/tag/"
>
<div id="p-tag">
Tags
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/card/"
>
<div id="p-card">
Cards
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/collapse/"
>
<div id="p-collapse">
Collapse
</div>
</pretty-menu-item>
<pretty-menu-item
action="change-view"
action-data="views/modal/"
>
<div id="p-modal">
Modal
</div>
</pretty-menu-item>
</pretty-menu>
<div class="demo-layout">
<pretty-template styleless src="views/default/">

</pretty-template>
</div>
<script type="text/javascript" src="main.js"></script></body>
</html>
13 changes: 13 additions & 0 deletions js/codepen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const BASE_URL = "https://codepen.io/osszzyy/pen/";

document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.example').forEach(ex => {
ex.addEventListener('click', () => {
redirect(ex.classList[1]);
})
})
})

function redirect(code) {
window.open(BASE_URL + code,'_blank');
}
27 changes: 27 additions & 0 deletions js/tags.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

let tArr = ['Close 1', 'Close 2', 'Close 3'];

function writeTags() {
const box = document.querySelector('.dynamic-tags');
box.innerHTML = '';
tArr.forEach(t => {
const newEl = document.createElement('pretty-tag');
newEl.value = t;
newEl.isCloseable = true;
newEl.onClose = onCloseCallback;
box.appendChild(newEl)
})
}



function onCloseCallback(el, that, ev) {
console.log(el, that.name);
const index = tArr.indexOf(that.name);
tArr.splice(index, 1);
writeTags();
}

document.addEventListener('DOMContentLoaded', () => {
writeTags();
})
Loading

0 comments on commit 59cde38

Please sign in to comment.