Added flexbox. Closes #6

This commit is contained in:
Shaun Kerr 2018-06-28 10:08:45 +12:00
parent 5c08a1c5d8
commit 6aab9b7f8d

59
Main.hs
View File

@ -68,7 +68,8 @@ getHomeR = defaultLayout $ do
} }
body { body {
width: 740px; min-width: 400px;
max-width: 600px;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
@ -81,7 +82,7 @@ getHomeR = defaultLayout $ do
padding: 5px; padding: 5px;
} }
header { header, footer {
margin: 0px; margin: 0px;
padding: 5px; padding: 5px;
border-top: 4px solid white; border-top: 4px solid white;
@ -103,48 +104,24 @@ getHomeR = defaultLayout $ do
padding: 5px; padding: 5px;
} }
.flexboxcontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul { ul {
text-align: initial; text-align: initial;
} }
.current {
width: 600px;
}
.currentFormat {
margin: auto;
padding: 1px;
}
.currentLeft {
width: 300px;
float: left;
}
.currentRight {
margin-left: 300px;
}
.upcoming {
width: 600px;
}
.changes {
margin: auto;
padding: 1px;
}
.upcomingIn { .upcomingIn {
color: #00DD00; color: #00DD00;
background-color: inherit; background-color: inherit;
width: 300px;
float: left;
} }
.upcomingOut { .upcomingOut {
color: #DD0000; color: #DD0000;
background-color: inherit; background-color: inherit;
margin-left: 300px;
} }
|] |]
addScriptRemote "https://fonts.googleapis.com/css?family=Inconsolata" addScriptRemote "https://fonts.googleapis.com/css?family=Inconsolata"
@ -155,10 +132,9 @@ getHomeR = defaultLayout $ do
|] |]
toWidgetBody [hamlet| toWidgetBody [hamlet|
<section class="rotation"> <section class="rotation">
<div class="current">
<h2>Format for #{showMonth month} #{year}: <h2>Format for #{showMonth month} #{year}:
<div class="currentFormat"> <div class="flexboxcontainer">
<div class="currentLeft"> <div class="rotationLeft">
<h3>Evergreen: <h3>Evergreen:
<ul> <ul>
<li>Revised Core Set x3 <li>Revised Core Set x3
@ -166,15 +142,14 @@ getHomeR = defaultLayout $ do
<ul> <ul>
$forall bb <- bbout $forall bb <- bbout
<li>#{bb} <li>#{bb}
<div class="currentRight"> <div class="rotationRight">
<h3>Data-packs: <h3>Data-packs:
<ul> <ul>
$forall dp <- dpout $forall dp <- dpout
<li>#{dp} <li>#{dp}
<div class="upcoming">
<h2>Upcoming Changes for #{showMonth nextMonth} #{year}: <h2>Upcoming Changes for #{showMonth nextMonth} #{year}:
<div class="flexboxcontainer">
$maybe (pin, pout, pbin, pbout) <- pr $maybe (pin, pout, pbin, pbout) <- pr
<div class="changes">
<div class="upcomingIn"> <div class="upcomingIn">
<h3>In: <h3>In:
<ul> <ul>
@ -224,9 +199,15 @@ getHomeR = defaultLayout $ do
<li>On the 20th of every month, a preview of the next months format will be shown <li>On the 20th of every month, a preview of the next months format will be shown
<li><del>No matter what the currently legal packs are, Door to Door (Escalation #59) will always be legal</del> <li><del>No matter what the currently legal packs are, Door to Door (Escalation #59) will always be legal</del>
|] |]
toWidgetBody [hamlet|
<footer>
<p>Shaun Kerr (techieAgnostic) - shaundavidkerr@gmail.com
<p>Credit to Chris Hay
<p><em>Powered by Haskell - Minimally Tested</em>
|]
main :: IO () main :: IO ()
main = warp 80 Chhf main = warp 7280 Chhf
toTS :: (Integer, Int, Int) -> Timestamp toTS :: (Integer, Int, Int) -> Timestamp
toTS (y,m,d) = Ts (fromIntegral d) (fromIntegral m) y toTS (y,m,d) = Ts (fromIntegral d) (fromIntegral m) y