Merge pull request #31 from vinibiavatti1/develop

Develop to Master

CHANGELOG.md

@@ -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

dist/tuicss.css

@@ -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 */

dist/tuicss.js

@@ -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;
         }
     }
 }

examples/mobile.html

@@ -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>

package.json

@@ -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",