From 9f78b6bd79ba211f61e4bed3c4cfd9919904cb67 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sun, 4 Dec 2016 19:04:41 +0100
Subject: [PATCH] frontend: move user box to the top of the page

---
 frontend/static/css/fic.css |  5 -----
 frontend/static/index.html  | 38 +++++++++++++++++++++++--------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/static/css/fic.css b/frontend/static/css/fic.css
index 4ca6a5de..2f9a7d81 100644
--- a/frontend/static/css/fic.css
+++ b/frontend/static/css/fic.css
@@ -69,11 +69,6 @@ h1 small.authors {
 }
 
 .teamname {
-    padding: 2px 7px;
-    border-radius: 2px;
-    box-shadow: #444 0 0 3px;
-}
-.teamname span {
     -webkit-filter: invert(100%);
     filter: invert(100%);
 }
diff --git a/frontend/static/index.html b/frontend/static/index.html
index 3a2dad7c..7268f504 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -31,12 +31,12 @@
     <div class="navbar navbar-default">
       <div class="container">
 	<div class="row">
-	<div class="navbar-header col-sm-3" ng-show="!(time.start || my.team_id)">
+	<div class="navbar-left col-sm-3" ng-show="!(time.start || my.team_id)">
           <a href="https://www.forum-fic.com/">
             <img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
 	  </a>
 	</div>
-	<div class="navbar-header col-sm-3" ng-show="(time.start || my.team_id)">
+	<div class="navbar-left col-sm-3" ng-show="(time.start || my.team_id)">
           <a href="/">
             <img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
 	  </a>
@@ -73,29 +73,39 @@
     <div class="container" ng-controller="DataController">
 
       <div class="row">
-	<div class="col-sm-9 col-sm-offset-3">
+
+	<div class="col-sm-3">
+	  <div class="panel panel-default" ng-show="(my.team_id)" style="margin-top: 10px; margin-bottom: 0px;">
+	    <div class="panel-heading" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};">
+	      <a style="margin: -8px -13px; color: {{ teams[my.team_id].color }};" class="pull-right btn btn-default" href="/edit"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
+	      <div class="panel-title">
+		<strong class="teamname">{{ my.name }}</strong>
+	      </div>
+	    </div>
+	    <div class="panel-body">
+	      <span ng-show="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }} &ndash;</span>
+	      {{ my.score }} points
+	      <div style="margin: -8px -10px;" class="pull-right btn-group">
+		<a class="btn btn-default" href="/rules"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
+		<a class="btn btn-default" href="/rank"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></a>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+
+	<div class="col-sm-9">
 	  <div class="page-header">
 	    <h1 ng-show="(current_theme)">{{ themes[current_theme].name }} <small class="authors" ng-show="themes[current_theme].authors">{{ themes[current_theme].authors }}</small></h1>
 	    <h1 ng-show="(!current_theme && title)">{{ title }} <small class="authors" ng-show="authors">{{ authors }}</small></h1>
 	    <h1 ng-show="(!current_theme && !title)">Challenge forensic 2016 <small class="authors">Laboratoire SRS, Epita</small></h1>
 	  </div>
 	</div>
+
       </div>
 
       <div class="row">
 
 	<div class="col-sm-3">
-	  <div class="panel panel-default" ng-show="(my.team_id)">
-	    <div class="panel-body">
-	      <strong class="teamname" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};"><span>{{ my.name }}</span></strong>
-	      <a style="float: right;" class="btn btn-default btn-xs" href="/edit">voir</a><br><br>
-
-	      <span ng-show="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }} &ndash;</span>
-	      {{ my.score }} points
-	      <a style="float: right;" class="btn btn-default btn-xs btn-primary" href="/rank">classement</a>
-	    </div>
-	  </div>
-
 	  <div class="list-group">
 	    <a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" href="/{{ k }}"><span class="badge"><span ng-show="(my.team_id)">{{ theme.exercice_solved }}/</span>{{ theme.exercice_count }}</span>{{ theme.name }}</a>
 	  </div>