commit 3294885db960530a299a7d8bb2f9ca8a7bd57d3e
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2015-09-02T11:04:14Z |
|---|
| subject | Contact form, brackground image and such |
|---|
commit 3294885db960530a299a7d8bb2f9ca8a7bd57d3e
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2015-09-02T11:04:14Z
Contact form, brackground image and such
---
botanjs/src/Astro/Blog/Element/Header.css | 60 +++++++++++++++++++++++++++++-
botanjs/src/Astro/Blog/Layout/MainFrame.js | 36 +++++++++++++++---
2 files changed, 89 insertions(+), 7 deletions(-)
diff --git a/botanjs/src/Astro/Blog/Element/Header.css b/botanjs/src/Astro/Blog/Element/Header.css
index fed1b55..9774ba9 100644
--- a/botanjs/src/Astro/Blog/Element/Header.css
+++ b/botanjs/src/Astro/Blog/Element/Header.css
@@ -54,10 +54,66 @@ header {
-webkit-box-shadow: inset 0 0 10px 0 black;
box-shadow: inset 0 0 10px 0 black;
- color: white;
- background: lightslategray;
+ background-image: url(http://file.astropenguin.net/blog/layout-images/home.png);
+ background-position: 50% 0;
position: absolute;
overflow: hidden;
+
+ text-align: center;
+}
+
+.begin-wrapper:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+
+ background-image: url(http://file.astropenguin.net/blog/layout-images/home.png);
+ background-position: 50% 0;
+ background-repeat: no-repeat;
+ opacity: 0.2;
+}
+
+.contact-wrapper {
+ text-align: center;
+ position: relative;
+}
+
+.contact-wrapper > * {
+ display: inline-block;
+ vertical-align: middle;
+ text-align: left;
+}
+
+.contact-block {
+ width: 40%;
+}
+
+.contact-form input, .contact-form textarea {
+ width: 100%;
+ text-align: left;
+}
+.contact-form > * {
+ margin-bottom: 0.5em;
+}
+
+.contact-form > input[type="submit"] {
+ width: auto;
+}
+
+.c-sep {
+ display: inline-block;
+ width: 1px;
+ margin: 0 2em;
+}
+.c-sep:after {
+ content: "";
+ position: absolute;
+ height: 100%;
+ border-left: 1px solid black;
+ top: 0;
}
.collapse_panel {
diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js
index d8604ba..b181203 100644
--- a/botanjs/src/Astro/Blog/Layout/MainFrame.js
+++ b/botanjs/src/Astro/Blog/Layout/MainFrame.js
@@ -3,6 +3,8 @@
/** @type {System.Cycle} */
var Cycle = __import( "System.Cycle" );
+ /** @type {System.Cycle.Trigger} */
+ var Trigger = __import( "System.Cycle.Trigger" );
/** @type {System.utils.IKey} */
var IKey = __import( "System.utils.IKey" );
/** @type {Dandelion} */
@@ -26,6 +28,9 @@
// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
+ /** @function {System.Net.getData} */
+ var getData = __import( "System.Net.getData" );
+
var main;
var header;
var main_h;
@@ -59,7 +64,6 @@
content_wrapper.appendChild( padder );
-
IDOMObject( window ).addEventListener( "Resize", responsify );
initTopButton();
@@ -84,7 +88,7 @@
= "purple";
contact = Dand.id( "menu_cont", true );
- contact.addEventListener( "Click", expandContact );
+ contact.addEventListener( "Click", loadContactForm );
Dand.id( "menu", true ).foreach(
1, function( e )
@@ -98,6 +102,24 @@
);
};
+ var loadContactForm = function( e )
+ {
+ getData( "/ajax/get-snippet/ContactForm", function( data )
+ {
+ var data = JSON.parse( data );
+ var wrapper = IDOMElement( contact_page ).first( 1 );
+ if ( wrapper )
+ {
+ wrapper.innerHTML = data["mesg"];
+ Cycle.next( function()
+ {
+ expandContact( e );
+ wrapper.style.marginTop = .5 * ( 400 - wrapper.clientHeight ) + "px";
+ } );
+ }
+ } );
+ };
+
var navControl = function ()
{
// Page control
@@ -146,7 +168,7 @@
var expandContact = function ()
{
// disable click event on the button
- contact.removeEventListener( "Click", expandContact );
+ contact.removeEventListener( "Click", loadContactForm );
// enable click event for collapse
collapse_panel.onclick = doCollapse;
@@ -170,8 +192,12 @@
{
// disable click event for collapse
collapse_panel.onclick = null;
- // enable click event on the button
- contact.addEventListener( "Click", expandContact );
+
+ Trigger.height( contact_page, 0, function()
+ {
+ // enable click event on the button
+ contact.addEventListener( "Click", loadContactForm );
+ } );
// Reverting states
contact_page.style.height