commit 5e48868fa8494760353bc2cc284d1e0d60d50cc9
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2016-11-11T03:09:35Z |
|---|
| subject | HomeEntry Responsive style |
|---|
commit 5e48868fa8494760353bc2cc284d1e0d60d50cc9
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2016-11-11T03:09:35Z
HomeEntry Responsive style
---
botanjs/src/Astro/Blog/Components/Entry/Home.css | 11 +++++++++++
botanjs/src/Astro/Starfall/Layout/TwoColumn.js | 16 ++++++++++------
2 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/botanjs/src/Astro/Blog/Components/Entry/Home.css b/botanjs/src/Astro/Blog/Components/Entry/Home.css
index 08ea682..28e72b5 100644
--- a/botanjs/src/Astro/Blog/Components/Entry/Home.css
+++ b/botanjs/src/Astro/Blog/Components/Entry/Home.css
@@ -10,12 +10,22 @@
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;
@@ -47,6 +57,7 @@
width: 80px;
height: 80px;
}
+[data-narrow] .h_avatarWrapper { display: inline; }
.h_avatar, .a_avatarWrapper {
width: 80px;
diff --git a/botanjs/src/Astro/Starfall/Layout/TwoColumn.js b/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
index 24ca689..c3f1db1 100644
--- a/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
+++ b/botanjs/src/Astro/Starfall/Layout/TwoColumn.js
@@ -14,12 +14,16 @@
BotanJS.addEventListener( "Responsive"
/** e @type {Astro.Starfall.Events.Responsive} */
, function( e ) {
- rspd.foreach(
- document.ELEMENT_NODE
- , e.data.ratio < 1.2
- ? function( elem ) { elem.style.width = "100%"; }
- : function( elem ) { elem.style.width = ""; }
- );
+ 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 = ""; } );
+ }
});
}
};