commit 6c72ee9defa0dec9b0a7287b8a78701825eefbc7
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2017-09-26T05:01:10Z |
|---|
| subject | Introducing new responsive classes |
|---|
commit 6c72ee9defa0dec9b0a7287b8a78701825eefbc7
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2017-09-26T05:01:10Z
Introducing new responsive classes
---
botanjs/src/Astro/Blog/Components/Comment.js | 11 --------
botanjs/src/Astro/Blog/Components/Entry/Home.css | 12 ---------
botanjs/src/Astro/Starfall/Layout/MainFrame.js | 20 --------------
botanjs/src/Astro/Starfall/Layout/TwoColumn.css | 28 ++++++++++----------
botanjs/src/Astro/Starfall/Layout/TwoColumn.js | 33 +-----------------------
botanjs/src/Astro/utils/Date.js | 14 +++++-----
6 files changed, 23 insertions(+), 95 deletions(-)
diff --git a/botanjs/src/Astro/Blog/Components/Comment.js b/botanjs/src/Astro/Blog/Components/Comment.js
index 6ba8463..e53d898 100644
--- a/botanjs/src/Astro/Blog/Components/Comment.js
+++ b/botanjs/src/Astro/Blog/Components/Comment.js
@@ -704,17 +704,6 @@
}
}
- var stage = c_body.parentNode
- BotanJS.addEventListener( "Responsive"
- /** e @type {Astro.Starfall.Events.Responsive} */
- , function( e ) {
- e.data.ratio < 1
- ? stage.style.width = "100%"
- : stage.style.width = ""
- ;
- }
- );
-
if( !loggedIn )
{
var limit = 5;
diff --git a/botanjs/src/Astro/Blog/Components/Entry/Home.css b/botanjs/src/Astro/Blog/Components/Entry/Home.css
index 28e72b5..b29bb8a 100644
--- a/botanjs/src/Astro/Blog/Components/Entry/Home.css
+++ b/botanjs/src/Astro/Blog/Components/Entry/Home.css
@@ -10,22 +10,11 @@
text-align: right;
}
-[data-narrow] .h_info {
- position: relative;
- width: auto;
- text-align: center;
-}
-
.h_body {
margin-left: 7em;
margin-right: 0.5em;
}
-[data-narrow] .h_body
-, [data-narrow] .h_bodyWrapper {
- margin: 0 auto;
-}
-
.h_bodyWrapper {
border: 1px solid #D4D7C9;
background-color: #FAFAFA;
@@ -57,7 +46,6 @@
width: 80px;
height: 80px;
}
-[data-narrow] .h_avatarWrapper { display: inline; }
.h_avatar, .a_avatarWrapper {
width: 80px;
diff --git a/botanjs/src/Astro/Starfall/Layout/MainFrame.js b/botanjs/src/Astro/Starfall/Layout/MainFrame.js
index 0f369da..857ba21 100644
--- a/botanjs/src/Astro/Starfall/Layout/MainFrame.js
+++ b/botanjs/src/Astro/Starfall/Layout/MainFrame.js
@@ -34,26 +34,6 @@
}
content_wrapper.appendChild( padder );
-
- IDOMObject( window ).addEventListener( "Resize", responsify );
-
- responsify( null, true );
- };
-
- var rspd_ratio = 0;
- var responsify = function( e, override )
- {
- // Ratio changes would trigger content
- var ratio = wsupp.clientWidth / wsupp.clientHeight;
-
- // Swap only on ration changes from 1 < x OR x < 1
- if( ( ratio < 1.2 && 1.2 < rspd_ratio ) || ( 1.2 < ratio && rspd_ratio < 1.2 ) || override )
- {
- rspd_ratio = ratio;
- debug.Info( "Responsive Event: R = " + ratio );
-
- BotanJS.dispatchEvent( new BotanEvent( "Responsive", { "ratio": ratio } ) );
- }
};
Bootstrap.regInit( init );
diff --git a/botanjs/src/Astro/Starfall/Layout/TwoColumn.css b/botanjs/src/Astro/Starfall/Layout/TwoColumn.css
index 92d09c7..e6937a6 100644
--- a/botanjs/src/Astro/Starfall/Layout/TwoColumn.css
+++ b/botanjs/src/Astro/Starfall/Layout/TwoColumn.css
@@ -1,19 +1,22 @@
-.contentWrap {
- position: relative;
- width: 100%;
-}
-
-#dockleft {
- position: absolute;
- z-index: 0;
+/* Responsive class: if smaller than N em */
+@media print, screen and (max-width: 79em) {
+ .rs .rs-w100 { width: 100%; }
+ .rs .rs-child-w100 > div { width: 100%; }
+ .rs .rs-auto-margin { margin: 0 auto; }
+ .rs .rs-auto-width { width: auto; }
+ .rs .rs-text-center { text-align: center; }
+ .rs .rs-rel-on { position: relative; }
+ .rs .rs-inline-on { display: inline; }
}
.main {
- /* background-color: #FAFAFA; */
vertical-align: top;
min-width: 70%;
position: relative;
+
+ /*background-color: #FAFAFA;*/
+ /*border-right: #76400C solid 0.2em;*/
}
/**
@@ -32,12 +35,11 @@ ul.breadcrumb > li.sep:after { content: "\2022"; }
min-width: 30%;
}
-#dockright {
+.dockright {
position: relative;
- /*border-right: #76400C solid 0.2em;*/
}
-#dockright > div {
+.dockright > div {
float: right;
margin: 0 -.3em;
@@ -50,7 +52,7 @@ ul.breadcrumb > li.sep:after { content: "\2022"; }
min-height: 7px;
}
-#extend_sec, #dockright {
+#extend_sec, .dockright {
/* Same as dockright */
width: 100%;
}
diff --git a/botanjs/src/Astro/Starfall/Layout/TwoColumn.js b/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
index c3f1db1..9b8f06f 100644
--- a/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
+++ b/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
@@ -1,32 +1 @@
-(function(){
- var ns = __namespace( "Astro.Starfall.Layout.TwoColumn" );
-
- /** @type {Dandelion} */
- var Dand = __import( "Dandelion" );
- /** @type {Astro.Bootstrap} */
- var Bootstrap = __import( "Astro.Bootstrap" );
-
- var init = function ()
- {
- var rspd = Dand.id( "dockright", true );
- if( rspd )
- {
- BotanJS.addEventListener( "Responsive"
- /** e @type {Astro.Starfall.Events.Responsive} */
- , function( e ) {
- if( e.data.ratio < 1.2 )
- {
- document.body.setAttribute( "data-narrow", 1 );
- rspd.foreach( document.ELEMENT_NODE, function( elem ) { elem.style.width = "100%"; } );
- }
- else
- {
- document.body.removeAttribute( "data-narrow" );
- rspd.foreach( document.ELEMENT_NODE, function( elem ) { elem.style.width = ""; } );
- }
- });
- }
- };
-
- Bootstrap.regInit( init );
-})();
+// __namespace( "Astro.Starfall.Layout.TwoColumn" );
diff --git a/botanjs/src/Astro/utils/Date.js b/botanjs/src/Astro/utils/Date.js
index 1a82218..96a8d0c 100644
--- a/botanjs/src/Astro/utils/Date.js
+++ b/botanjs/src/Astro/utils/Date.js
@@ -115,14 +115,14 @@
// returns a suffix string
// st, nd, rd, th
- var getOrdinalSuffix = function(day)
+ var getOrdinalSuffix = function( day )
{
- if (day < 4 || ( 20 < day && day < 24 )) {
- if (day == 1 || day == 21) return "st";
- else if (day == 2 || day == 22) return "nd";
- else if (day == 3 || day == 23) return "rd";
- }
- else if (day == 31) return "st";
+ if( day < 1 || 31 < day )
+ throw new Error( "Day is out of range 1 <= day <= 31" );
+
+ if ( day == 1 || day == 21 || day == 31 ) return "st";
+ else if ( day == 2 || day == 22 ) return "nd";
+ else if ( day == 3 || day == 23 ) return "rd";
return "th";
};