Skip to content

Commit

Permalink
Merge pull request #31 from vinibiavatti1/develop
Browse files Browse the repository at this point in the history
Develop to Master
  • Loading branch information
vinibiavatti1 authored Oct 5, 2021
2 parents 87b0869 + 01738c4 commit 8bba5df
Showing 14 changed files with 307 additions and 74 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
# TuiCss ChangeLog
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version

#### 2.1.1

Bugs
- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29
- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30

Examples
- Created the mobile example

#### 2.1.0
- .disabled classes
- Fixed the default radius border of inputs
54 changes: 54 additions & 0 deletions dist/tuicss.css
Original file line number Diff line number Diff line change
@@ -49,6 +49,60 @@ hr {
input, select, textarea {
width: 200px; }

/* Font (Options: 'Lucida Console' or 'DOS') */
/* Characters */
/* Theme */
/* Responsive */
/* Scrool */
/* Grid */
@media only screen and (max-width: 600px) {
.hide-on-small-only, .hide-on-small-and-down {
display: none !important; } }

@media only screen and (max-width: 992px) {
.hide-on-med-and-down {
display: none !important; } }

@media only screen and (min-width: 601px) {
.hide-on-med-and-up {
display: none !important; } }

@media only screen and (min-width: 600px) and (max-width: 992px) {
.hide-on-med-only {
display: none !important; } }

@media only screen and (min-width: 993px) {
.hide-on-large-only {
display: none !important; } }

@media only screen and (min-width: 1201px) {
.hide-on-extra-large-only {
display: none !important; } }

@media only screen and (min-width: 1201px) {
.show-on-extra-large {
display: block !important; } }

@media only screen and (min-width: 993px) {
.show-on-large {
display: block !important; } }

@media only screen and (min-width: 600px) and (max-width: 992px) {
.show-on-medium {
display: block !important; } }

@media only screen and (max-width: 600px) {
.show-on-small {
display: block !important; } }

@media only screen and (min-width: 601px) {
.show-on-medium-and-up {
display: block !important; } }

@media only screen and (max-width: 992px) {
.show-on-medium-and-down {
display: block !important; } }

/* Font (Options: 'Lucida Console' or 'DOS') */
/* Characters */
/* Theme */
69 changes: 34 additions & 35 deletions dist/tuicss.js
Original file line number Diff line number Diff line change
@@ -99,45 +99,44 @@ function datetimeController() {

// Kick off our clock interval stuff.
datetimeInterval();
setInterval(datetimeInterval, 1000);

// Synchronize time and set interval to control the clocks
setTimeout(() => {
setInterval(datetimeInterval, 1000);
}, 1000 - new Date().getMilliseconds());

function datetimeInterval() {
for (const clock of clocks) {
// Set the interval.
const interval = setInterval(() => {
// Technically we should have already returned earlier in the code, but to be on the safe side.
if (clock === null) {
clearInterval(interval);
return;
}
if (clock === null) {
continue;
}

// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');

// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';

// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);

// Show it in the element.
clock.innerHTML = format;
});
// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');

// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';

// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);

// Show it in the element.
clock.innerHTML = format;
}
}
}
2 changes: 1 addition & 1 deletion dist/tuicss.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/tuicss.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

171 changes: 171 additions & 0 deletions examples/mobile.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en" class="no-tui-scroll">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.content {
padding: 40px 0px;
}
.post-img {
width: 100%;
border: 4px solid black;
}
.add-btn {
bottom: 0px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 999;
width: 50px;
height: 50px;
}
.post {
margin-bottom: 5px;
width: 100%;
}
</style>
</head>

<body class="tui-bg-blue-black relative">
<!-- Sidenav -->
<nav class="tui-sidenav absolute">
<ul>
<li>
<a href="#!">
<span class="red-168-text">P</span>rofile
<span class="tui-shortcut">ctrl+p</span>
</a>
</li>
<li>
<a href="#!">
<span class="red-168-text">S</span>earch
<span class="tui-shortcut">ctrl+s</span>
</a>
</li>
<li>
<a href="#!">
S<span class="red-168-text">t</span>ory
<span class="tui-shortcut">ctrl+t</span>
</a>
</li>
</ul>
</nav>

<!-- Navbar -->
<nav class="tui-nav">
<span class="tui-datetime" data-format="h:m:s a"></span>
<ul>
<li class="tui-sidenav-button red-168-text"></li>
<li class="tui-dropdown hide-on-med-and-down">
<span class="red-168-text">P</span>rofile
<div class="tui-dropdown-content">
<ul>
<li>
<a href="#!">
<span class="red-168-text">A</span>vatar
</a>
</li>
<li>
<a href="#!">
P<span class="red-168-text">r</span>eferences
<span class="tui-shortcut">F3</span>
</a>
</li>
<li class="tui-dropdown block">
<span class="right"></span>
<span class="red-168-text">M</span>ore
<div class="tui-dropdown-content">
<ul>
<li>
<a href="#!">
<span class="red-168-text">I</span>diom
</a>
</li>
<li>
<a href="#!">
<span class="red-168-text">B</span>locked Users
</a>
</li>
</ul>
</div>
</li>

<div class="tui-black-divider"></div>
<li>
<a href="#!">
<span class="red-168-text">S</span>tories
<span class="tui-shortcut">F10</span>
</a>
</li>
</ul>
</div>
</li>
<li class="tui-dropdown hide-on-med-and-down">
<span class="red-168-text">H</span>elp
</li>
</ul>
</nav>

<!-- Edit panel -->
<div class="content container">
<div class="row">
<div class="col s12 m12 l12 white-text center">
<h3>InstaTui</h3>
<hr>
The best old-school social network<br>
<span class="orange-255 black-text hide-on-small-only">(Try this in a mobile view)</span>
<span class="green-255 black-text hide-on-med-and-up">(√ Mobile view)</span>
</div>
</div>
<div class="row">
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
John Due says:
<hr>
<img class="post-img" src="resources/winxp.png" />
The winxp bg is amazing!
</fieldset>
</div>
</div>
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
Jane Due says:
<hr>
<img class="post-img" src="resources/disks.png" />
Bought my first 2 PC games!
</fieldset>
</div>
</div>
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
Astronaut says:
<hr>
<img class="post-img" src="resources/step.png" />
One small step for man one giant leap for mankind
</fieldset>
</div>
</div>
</div>
</div>

<!-- Status bar -->
<div class="tui-statusbar fixed" style="bottom: 0px;">
<ul>
<li class="right" style="margin-right: 10px;"><a href="#!">Search</a></li>
<li><a href="#!">Profile</a></li>
</ul>
</div>

<button class="tui-button red-168 white-255-text fixed add-btn">+</button>
</body>

</html>
Binary file added examples/resources/disks.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 examples/resources/step.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 examples/resources/winxp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tuicss",
"version": "2.1.0",
"version": "2.1.1",
"description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
"keywords": [
"tui",
Binary file added resources/tuicss mobile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8bba5df

Please sign in to comment.