From e818bc85bc99638e37555ff2669a8a2d2d0b0847 Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Wed, 7 Aug 2013 18:14:39 +0530
Subject: [PATCH] UI changes for  Participate Page

UI changes for  Participate Page
---
 .../web/static/foundation/css/codalab.css     | 179 ++++++++++--------
 .../web/static/foundation/sass/_settings.scss |  19 ++
 .../web/templates/web/my/participants.html    |  33 ++--
 3 files changed, 137 insertions(+), 94 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index 814d7f3b9..169821117 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -63,80 +63,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 61, ../sass/_settings.scss */
+/* line 66, ../sass/_settings.scss */
 * {
   font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
   font-size: 100%;
   font-weight: normal;
 }
 
-/* line 67, ../sass/_settings.scss */
+/* line 72, ../sass/_settings.scss */
 .menu-icon {
   background: #3684d6;
 }
 
-/* line 71, ../sass/_settings.scss */
+/* line 76, ../sass/_settings.scss */
 .menu-icon > span, .menu-icon > span a, .menu-icon > span a:hover {
   border-bottom-style: none;
   border: 0px;
   padding: 2px;
 }
 
-/* line 78, ../sass/_settings.scss */
+/* line 83, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section:not(.active) p a:hover {
   color: #ffac31;
 }
 
-/* line 82, ../sass/_settings.scss */
+/* line 87, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title {
   background: transparent;
 }
 
-/* line 85, ../sass/_settings.scss */
+/* line 90, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section.active div.content {
   border: 0px;
 }
 
-/* line 89, ../sass/_settings.scss */
+/* line 94, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title a {
   padding: 2px;
   text-align: right;
   border: 0px;
 }
 
-/* line 95, ../sass/_settings.scss */
+/* line 100, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p {
   border: 0px;
 }
 
-/* line 99, ../sass/_settings.scss */
+/* line 104, ../sass/_settings.scss */
 td > a > i {
   color: #3684d6;
 }
 
-/* line 103, ../sass/_settings.scss */
+/* line 108, ../sass/_settings.scss */
 a > i {
   height: 100%;
   color: white;
 }
 
-/* line 108, ../sass/_settings.scss */
+/* line 113, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title {
   font-size: 19px;
   font-weight: 400;
 }
 
-/* line 113, ../sass/_settings.scss */
+/* line 118, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title a:hover {
   color: #ffac31;
 }
 
-/* line 117, ../sass/_settings.scss */
+/* line 122, ../sass/_settings.scss */
 .process_participant_request {
   padding-top: 10px;
 }
 
-/* line 122, ../sass/_settings.scss */
+/* line 127, ../sass/_settings.scss */
 .competitionUserBlock {
   border: solid 1px #ccc;
   margin-bottom: 10px;
@@ -144,49 +144,49 @@ a > i {
   padding: 0;
 }
 
-/* line 129, ../sass/_settings.scss */
+/* line 134, ../sass/_settings.scss */
 .competitionUserBlock p {
   font-size: 13px;
 }
 
-/* line 133, ../sass/_settings.scss */
+/* line 138, ../sass/_settings.scss */
 .user_results, .competition_results {
   padding-top: 10px;
 }
 
-/* line 137, ../sass/_settings.scss */
+/* line 142, ../sass/_settings.scss */
 .user_results {
   margin-left: 15px;
 }
 
-/* line 141, ../sass/_settings.scss */
+/* line 146, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 145, ../sass/_settings.scss */
+/* line 150, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 150, ../sass/_settings.scss */
+/* line 155, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 154, ../sass/_settings.scss */
+/* line 159, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 159, ../sass/_settings.scss */
+/* line 164, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 162, ../sass/_settings.scss */
+/* line 167, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -194,21 +194,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 169, ../sass/_settings.scss */
+/* line 174, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 175, ../sass/_settings.scss */
+/* line 180, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 181, ../sass/_settings.scss */
+/* line 186, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -218,13 +218,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 190, ../sass/_settings.scss */
+/* line 195, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 195, ../sass/_settings.scss */
+/* line 200, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -233,7 +233,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 203, ../sass/_settings.scss */
+/* line 208, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -241,33 +241,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 210, ../sass/_settings.scss */
+/* line 215, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 214, ../sass/_settings.scss */
+/* line 219, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 220, ../sass/_settings.scss */
+/* line 225, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 226, ../sass/_settings.scss */
+/* line 231, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 231, ../sass/_settings.scss */
+/* line 236, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -283,26 +283,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 246, ../sass/_settings.scss */
+/* line 251, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 251, ../sass/_settings.scss */
+/* line 256, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 257, ../sass/_settings.scss */
+/* line 262, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 262, ../sass/_settings.scss */
+/* line 267, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -311,13 +311,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 270, ../sass/_settings.scss */
+/* line 275, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 275, ../sass/_settings.scss */
+/* line 280, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -325,49 +325,49 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 282, ../sass/_settings.scss */
+/* line 287, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 288, ../sass/_settings.scss */
+/* line 293, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 293, ../sass/_settings.scss */
+/* line 298, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 297, ../sass/_settings.scss */
+/* line 302, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 301, ../sass/_settings.scss */
+/* line 306, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 306, ../sass/_settings.scss */
+/* line 311, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 311, ../sass/_settings.scss */
+/* line 316, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
-/* line 317, ../sass/_settings.scss */
+/* line 322, ../sass/_settings.scss */
 .signin-centered-container {
   margin: auto !important;
   float: none !important;
@@ -375,112 +375,112 @@ p.competition-paragraph {
   padding: 25px;
 }
 
-/* line 324, ../sass/_settings.scss */
+/* line 329, ../sass/_settings.scss */
 .small-6.pull-6.columns > .globalBlueButton {
   float: right;
 }
 
-/* line 327, ../sass/_settings.scss */
+/* line 332, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > input {
   float: left;
   position: relative;
   top: -20px;
 }
 
-/* line 332, ../sass/_settings.scss */
+/* line 337, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > label {
   padding-left: 20px;
 }
 
-/* line 336, ../sass/_settings.scss */
+/* line 341, ../sass/_settings.scss */
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
   box-shadow: none;
   white-space: nowrap;
 }
-/* line 340, ../sass/_settings.scss */
+/* line 345, ../sass/_settings.scss */
 .globalBlueButton a:focus, .globalBlueButtonBig a:focus, .globalBlueButtonInput a:focus, .globalBlueButtonAtag > a a:focus, .globalBlueButtonSmallAtag > a a:focus, .globalBlueButtonSmall a:focus, .globalBlueButtonSmallFlexi a:focus, .buttonAccept a:focus {
   color: white !important;
 }
 
-/* line 344, ../sass/_settings.scss */
+/* line 349, ../sass/_settings.scss */
 .signin-centered-container > p > a {
   display: inline-block;
 }
 
-/* line 348, ../sass/_settings.scss */
+/* line 353, ../sass/_settings.scss */
 ul.side-nav {
   padding-top: 0;
   position: fixed;
 }
-/* line 351, ../sass/_settings.scss */
+/* line 356, ../sass/_settings.scss */
 ul.side-nav li {
   margin-bottom: 2px;
 }
-/* line 354, ../sass/_settings.scss */
+/* line 359, ../sass/_settings.scss */
 ul.side-nav li a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 356, ../sass/_settings.scss */
+/* line 361, ../sass/_settings.scss */
 ul.side-nav li a:hover {
   color: #ffac31;
 }
-/* line 357, ../sass/_settings.scss */
+/* line 362, ../sass/_settings.scss */
 ul.side-nav li a:active {
   background: none;
 }
-/* line 359, ../sass/_settings.scss */
+/* line 364, ../sass/_settings.scss */
 ul.side-nav li.active a {
   color: #666666 !important;
 }
 
-/* line 365, ../sass/_settings.scss */
+/* line 370, ../sass/_settings.scss */
 .glossary-page-container h6, competitions-block-Styling h6, .section-container.vertical-tabs .content h6 {
   font-size: 14px;
   color: #666666;
 }
-/* line 370, ../sass/_settings.scss */
+/* line 375, ../sass/_settings.scss */
 .glossary-page-container p, competitions-block-Styling p, .section-container.vertical-tabs .content p {
   font-size: 12px;
   color: #666666;
 }
-/* line 375, ../sass/_settings.scss */
+/* line 380, ../sass/_settings.scss */
 .glossary-page-container ol, competitions-block-Styling ol, .section-container.vertical-tabs .content ol {
   font-size: 13px;
   color: #666666;
 }
-/* line 378, ../sass/_settings.scss */
+/* line 383, ../sass/_settings.scss */
 .glossary-page-container ol li, competitions-block-Styling ol li, .section-container.vertical-tabs .content ol li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 384, ../sass/_settings.scss */
+/* line 389, ../sass/_settings.scss */
 .glossary-page-container ul, competitions-block-Styling ul, .section-container.vertical-tabs .content ul {
   font-size: 13px;
   color: #666666;
   margin-left: 20px;
 }
-/* line 389, ../sass/_settings.scss */
+/* line 394, ../sass/_settings.scss */
 .glossary-page-container ul li, competitions-block-Styling ul li, .section-container.vertical-tabs .content ul li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 395, ../sass/_settings.scss */
+/* line 400, ../sass/_settings.scss */
 .glossary-page-container pre, competitions-block-Styling pre, .section-container.vertical-tabs .content pre {
   padding: 10px;
   background: #ebf2fb;
   margin-bottom: 15px;
 }
-/* line 401, ../sass/_settings.scss */
+/* line 406, ../sass/_settings.scss */
 .glossary-page-container p a, competitions-block-Styling p a, .section-container.vertical-tabs .content p a {
   color: #3684d6;
 }
-/* line 405, ../sass/_settings.scss */
+/* line 410, ../sass/_settings.scss */
 .glossary-page-container b, competitions-block-Styling b, .section-container.vertical-tabs .content b {
   color: #666666;
 }
 
-/* line 411, ../sass/_settings.scss */
+/* line 416, ../sass/_settings.scss */
 div.auto.section-container > section > .title a, .auto.section-container > .section > .title a {
   background: white;
   padding-left: 40px !important;
@@ -489,60 +489,77 @@ div.auto.section-container > section > .title a, .auto.section-container > .sect
   height: 57px;
 }
 
-/* line 420, ../sass/_settings.scss */
+/* line 425, ../sass/_settings.scss */
 .auto.section-container > section > .content, .auto.section-container > .section > .content, .vertical-tabs.section-container > section > .content, .vertical-tabs.section-container > .section > .content {
   background: #f8f8f8 !important;
 }
 
-/* line 424, ../sass/_settings.scss */
+/* line 429, ../sass/_settings.scss */
 .auto.section-container > section.active > .title {
   border-bottom: solid 1px #f8f8f8 !important;
 }
-/* line 426, ../sass/_settings.scss */
+/* line 431, ../sass/_settings.scss */
 .auto.section-container > section.active > .title a {
   background: #f8f8f8 !important;
 }
 
-/* line 431, ../sass/_settings.scss */
+/* line 436, ../sass/_settings.scss */
 .section-container.vertical-tabs .content {
   padding-top: 1px !important;
 }
-/* line 434, ../sass/_settings.scss */
+/* line 439, ../sass/_settings.scss */
 .section-container.vertical-tabs .content p {
   color: #3b3b3b;
   font-size: 13px;
   line-height: 22px;
 }
-/* line 439, ../sass/_settings.scss */
+/* line 444, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl {
   margin-bottom: 2px;
 }
-/* line 442, ../sass/_settings.scss */
+/* line 447, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 444, ../sass/_settings.scss */
+/* line 449, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a:hover {
   color: #ffac31 !important;
 }
-/* line 445, ../sass/_settings.scss */
+/* line 450, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a:active {
   background: none !important;
 }
-/* line 449, ../sass/_settings.scss */
+/* line 454, ../sass/_settings.scss */
 .section-container.vertical-tabs .active p a {
   color: #666666 !important;
   font-weight: bold;
 }
 
-/* line 455, ../sass/_settings.scss */
+/* line 460, ../sass/_settings.scss */
 .participateInfoBlock p {
   color: #3b3b3b;
   font-size: 13px;
   line-height: 22px;
 }
 
+/* line 464, ../sass/_settings.scss */
+.deny_reason {
+  box-shadow: inset 0 0 8px #ccc;
+  border-radius: 5px;
+}
+
+/* line 468, ../sass/_settings.scss */
+div.pending-approval-select.columns {
+  padding-left: 0.93em;
+}
+
+/* line 472, ../sass/_settings.scss */
+.competitionUserBlock h3 {
+  color: #3684d6;
+  margin-bottom: 2px;
+}
+
 /* font-face */
 @font-face {
   font-family: "GeneralFoundicons";
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index f1bccf9a4..114cb17fd 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -58,6 +58,11 @@ $tooltip-bg: $background;
 	line-height:22px;
 }
 
+@mixin textbox-style {
+	box-shadow:inset 0 0 8px #ccc;
+	border-radius:5px;
+}
+
 *{
     font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
 	font-size:   100%;
@@ -454,4 +459,18 @@ div.auto.section-container > section > .title, .auto.section-container > .sectio
 
 .participateInfoBlock p {
 	@include paragraph-Style;
+}
+
+.deny_reason {
+	@include textbox-style;
+}
+
+div.pending-approval-select.columns {
+	padding-left:0.93em;
+}
+.competitionUserBlock {
+	 h3 {
+		color:$highlight;
+		margin-bottom:2px;
+	 }
 }
\ No newline at end of file
diff --git a/codalab/apps/web/templates/web/my/participants.html b/codalab/apps/web/templates/web/my/participants.html
index 12d096c37..0270a04da 100644
--- a/codalab/apps/web/templates/web/my/participants.html
+++ b/codalab/apps/web/templates/web/my/participants.html
@@ -15,32 +15,39 @@ <h4>Participants</h4>
         {% for item in object_list %}
             <div class="row">
                 <div class="competitionUserBlock">
-                    <div class="large-4 push-8 columns process_participant_request">
+                    <div class="large-8 push-4 columns process_participant_request">
                         {% if item.status.codename == 'pending' %}
                                 <form class="process_request" id="process_request" action="/api/competition/{{competition.id}}/participate/" method="POST">{% csrf_token %}
-                                    <div class="small-6 push-6 columns">
-                                        <label for="accept"><input name="request" type="radio" id="accept"/> Accept</label>
+                                    <div class="row">
+                                        <div class="small-3 push-1 columns pending-approval-select">
+                                            <label for="accept"><input name="request" type="radio" id="accept"/> Accept</label>
+                                        </div>
+                                        <div class="small-3 pull-6 columns pending-approval-select">
+                                            <label for="deny"><input name="request" type="radio" id="deny"/> Deny</label>
+                                        </div>
                                     </div>
-                                    <div class="small-6 pull-6 columns">
-                                        <label for="deny"><input name="request" type="radio" id="deny"/> Deny</label>
+                                    <div class="row">
+                                        <div class="small-9 push-1 columns">
+                                            <label for="deny_reason">
+                                                <textarea id="deny_reason" name="deny_reason" class="deny_reason" placeholder="Reason :"></textarea>
+                                            </label>
+                                        </div>
+                                        <div class="small-2 pull-0 columns">
+                                            <input type="submit" class="globalBlueButtonSmall" value="Process" />
+                                        </div>
                                     </div>
-                                    <label for="deny_reason">
-                                        <strong>Reason :</strong>
-                                        <textarea id="deny_reason" name="deny_reason"></textarea>
-                                    </label>
-                                    <input type="submit" class="globalBlueButtonAtag" value="Process" />
                                 </form>
                         {% endif %} 
                     </div>
-                    <div class="large-8 pull-4 columns">
+                    <div class="large-4 pull-8 columns">
                         <h3>{{ item.user.username }}</h3>
                         {% if item.status.codename == 'pending' %}
                             <p>Participation pending approval</p>
                         {% elif item.status.codename == 'approved' %}
                             <p>Participation approved</p>
                         {% elif item.status.codename == 'denied' %}
-                            <p>Participation rejected</p>
-                            <p style="color:red;">Reason: {{ item.reason }}</p>
+                            <p>Participation rejected <br /><span style="color:red;"> Reason: {{ item.reason }}</span></p>
+                            
                         {% else %}
                             <p>Unknown Status</p>
                         {% endif %}