[feature #157801299] style game end page

andela · Jun 18, 2018 · 5148832 · 5148832
1 parent 38100a2
commit 5148832
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 17 deletions.
diff --git a/public/css/common.css b/public/css/common.css
@@ -604,7 +604,7 @@ body {
         margin-top: 10px; }
         @media (max-width: 520px) {
           #main-container #app-container #gameplay-container #game-end-container {
-            height: 65%; } }
+            height: 65%; } } 
         #main-container #app-container #gameplay-container #game-end-container #charity-widget-container {
           width: 40%;
           float: left; }

diff --git a/public/css/style.css b/public/css/style.css
@@ -595,7 +595,8 @@ li {
 
 .question-block {
   height: 100%;
-  text-align: center
+  text-align: center;
+  background-color: #fff;
 }
 
 #question-text {
@@ -636,6 +637,62 @@ li {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
 }
 
+.game-end-question {
+  margin: 5%
+}
+.game-end-answer {
+  margin:  1% 5%;
+  line-height: 1.6;
+  padding: 2% 1%;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
+}
+
+#inner-text-container {
+  display: flex;
+  justify-content: center;
+  margin: 5% 4%;
+
+}
+
+#join-new-game {
+  border: 2px solid transparent;
+  border-radius: 4px;
+  background-color: green;
+  color: #fff;
+  padding: 2% 2px;
+  margin: 0 5px;
+}
+
+#exit-match {
+  border: 2px solid transparent;
+  border-radius: 4px;
+  background-color: red;
+  color: #fff;
+  padding: 2% 2px;
+  margin: 0 5px;
+}
+
+/* #charity-widget-container {
+  border: 2px solid transparent;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
+} */
+
+#people-left-game-top {
+  margin-top: 5%;
+  font-weight: bold;
+}
+
+#charity-widget-container {
+  margin-top: 20px; }
+
+  @media (max-width: 520px) {
+  #charity-widget-container {
+    display: block !important;
+    width: 100% !important;
+    margin-top: 20px; } }
 /* card-design */
 
 .oldcard {
@@ -700,4 +757,54 @@ li {
       position: absolute;
       right: -0.357em;
       display: inline-block;
-      content: '.'; }
+      content: '.'; }
+
+      .crDonateWidget {
+        -webkit-box-shadow: 0px 0px 0px 0px transparent !important;
+        -moz-box-shadow: 0px 0px 0px 0px transparent !important;
+        box-shadow: 0px 0px 0px 0px transparent !important;
+        -webkit-border-radius: 8px !important;
+        -moz-border-radius: 8px !important;
+        border-radius: 8px !important; }
+
+      .crDonateWidgetOuter {
+        text-align: center;
+        background-color: transparent !important;
+        -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
+        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
+        border: 0px solid #e6e6e6 !important;
+        margin: 0px 0px !important; }
+
+      .crDonated {
+        margin-top: 2px !important; }
+
+      .crImageAndTitle {
+        display: none; }
+
+      .crImageAndTitleOuter {
+        display: none; }
+
+      .startFundraiser {
+        display: none; }
+
+      #crDonateWidget_cfhio_cards4humanity {
+        width: 90% !important;
+        margin: 0 auto;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 1) !important;
+        margin-top: 67px !important; }
+        #crDonateWidget_cfhio_cards4humanity .crDonateTriangle {
+          right: 6px !important; }
+        #crDonateWidget_cfhio_cards4humanity h4 {
+          margin-bottom: 8px !important; }
+
+      .gradientButton {
+        width: 80% !important;
+        margin-top: 8px !important;
+        background: #f4781f !important;
+        -webkit-border-radius: 8px !important;
+        -moz-border-radius: 8px !important;
+        border-radius: 8px !important;
+        text-transform: none !important; }
+        .gradientButton .donateNow {
+          border-top: 0px solid black !important; }
+
diff --git a/public/views/answers.html b/public/views/answers.html
@@ -36,15 +36,21 @@
   </div>
 </div>
 
-<div id="game-end-container" ng-show="game.state === 'game ended' || game.state ==='game dissolved'">
+<div class="text-center" id="game-end-container" ng-show="game.state === 'game ended' || game.state ==='game dissolved'">
   <div id="inner-info-exit">
-    <div class="game-end-answer-text" ng-show="game.state ==='game dissolved' && game.gameWinner === -1">
-      <h2>What would you like to do now?</h2>
-      You might consider donating to charity to atone for the horrifying answers you've submitted. Donating will also place a lovely crown on your avatar's head.
+    <div class="game-end-answer-text text-center" ng-show="game.state ==='game dissolved' && game.gameWinner === -1">
+      <h2 class="game-end-question">What would you like to do now?</h2>
+      <p class="game-end-answer">You might consider donating to charity to atone for the horrifying answers you've submitted. Donating will also place a lovely crown on your avatar's head.</p>
     </div>
     <div class="game-end-answer-text" ng-show="game.state === 'game ended' || game.gameWinner !== -1">
       <h2>What would you like to do now?</h2>
-      Help yourself to another game or help a child in need? Donating will also place a lovely crown on your avatar's head.
+      <p class="game-end-answer">Help yourself to another game or help a child in need? Donating will also place a lovely crown on your avatar's head.</p>
+    </div>
+
+    <div id="charity-widget-container">
+        <!-- This is real -->
+      <a href="http://www.crowdrise.com" id="crowdriseStaticLink-fundraiser-121142" title="Fundraising Websites on Crowdrise">Fundraising Websites - Crowdrise</a>
+      <script type="text/javascript" src="https://www.crowdrise.com/widgets/donate/fundraiser/121142/?callback=userDonationCb"></script>
     </div>
     <div id='inner-text-container'>
       <a href='/#!/app'>
@@ -58,15 +64,6 @@ <h2>What would you like to do now?</h2>
       </a>
     </div>
   </div>
-
-  <div id="charity-widget-container">
-      <!-- This is real -->
-      <a href="http://www.crowdrise.com" id="crowdriseStaticLink-fundraiser-121142" title="Fundraising Websites on Crowdrise">Fundraising Websites - Crowdrise</a>
-      <script type="text/javascript" src="https://www.crowdrise.com/widgets/donate/fundraiser/121142/?callback=userDonationCb"></script>
-      <!-- This is for testing -->
-      <!-- <a href="http://www.crowdrise.com" id="crowdriseStaticLink-project-36715" title="Fundraising Websites on Crowdrise">Fundraising Websites - Crowdrise</a> -->
-      <!-- <script type="text/javascript" src="https://apisandbox.crowdrise.com/widgets/donate/project/36715/?callback=userDonationCb"></script> -->
-  </div>
 </div>
 <div id="czar-blank-container" ng-show="isCzar() && game.table.length===0 && game.state !== 'game dissolved' && game.state !== 'awaiting players'">
   <div id="czar-blank-inner">