From 1856a78d10a0e08ceb31a8dccda499a7e2779f3a Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Tue, 31 May 2022 16:41:36 +0200
Subject: [PATCH] admin: Improve title and toasts rendering

---
 admin/static/js/app.js           |  2 +-
 admin/static/views/exercice.html | 20 ++++++++++++--------
 admin/static/views/sync.html     |  2 +-
 admin/static/views/theme.html    | 12 ++++++++----
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/admin/static/js/app.js b/admin/static/js/app.js
index a4c02fc5..4e0737d1 100644
--- a/admin/static/js/app.js
+++ b/admin/static/js/app.js
@@ -179,7 +179,7 @@ angular.module("FICApp")
 	    <span aria-hidden="true">&times;</span>
 	  </button>
 	</div>
-	<div class="toast-body" ng-bind-html="$ctrl.msg" ng-if="$ctrl.msg"></div>
+	<div class="toast-body text-break" ng-bind-html="$ctrl.msg" ng-if="$ctrl.msg"></div>
 	<div class="d-flex justify-content-around mb-1" ng-if="$ctrl.yesNo">
           <button type="button" class="ml-2 btn btn-sm btn-success" ng-click="$ctrl.yesFunc()">Yes</button>
           <button type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.noFunc()">No</button>
diff --git a/admin/static/views/exercice.html b/admin/static/views/exercice.html
index ccf9cd2f..a0977e02 100644
--- a/admin/static/views/exercice.html
+++ b/admin/static/views/exercice.html
@@ -1,15 +1,19 @@
-<h2>
-  {{exercice.title}}
-  <small ng-if="themes && themes[exercice.id_theme]"><a href="themes/{{ exercice.id_theme }}" title="{{themes[exercice.id_theme].authors | stripHTML}}">{{themes[exercice.id_theme].name}}</a></small>
+<div class="d-flex align-items-start">
+  <h2 class="text-truncate">
+    {{exercice.title}}
+    <small ng-if="themes && themes[exercice.id_theme]"><a href="themes/{{ exercice.id_theme }}" title="{{themes[exercice.id_theme].authors | stripHTML}}">{{themes[exercice.id_theme].name}}</a></small>
+  </h2>
   <div class="btn-group" role="group" ng-if="themes[exercice.id_theme].exercices[exercice.id]">
     <a href="exercices/{{ themes[exercice.id_theme].exercices[exercice.id].previous }}" title="Exercice précédent" ng-class="{'disabled': !themes[exercice.id_theme].exercices[exercice.id].previous}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
     <a href="exercices/{{ themes[exercice.id_theme].exercices[exercice.id].next }}" title="Exercice suivant" ng-class="{'disabled': !themes[exercice.id_theme].exercices[exercice.id].next}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
   </div>
-  <a href="exercices/{{exercice.id}}/resolution" ng-disabled="!exercice.videoURI" class="float-right ml-2 btn btn-sm btn-info"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Vidéo</a>
-  <a href="exercices/{{exercice.id}}/flags" class="float-right ml-2 btn btn-sm btn-success"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Flags</a>
-  <button type="button" ng-click="syncExo()" ng-class="{'disabled': inSync}" class="float-right ml-2 btn btn-sm btn-light"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Synchroniser</button>
-  <a href="{{exercice.forge_link}}" target="_blank" class="float-right ml-2 btn btn-sm btn-dark" ng-if="exercice.forge_link"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Voir sur la forge</a>
-</h2>
+  <div class="ml-auto d-flex flex-row-reverse text-nowrap">
+    <a href="exercices/{{exercice.id}}/resolution" ng-disabled="!exercice.videoURI" class="ml-2 btn btn-sm btn-info"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Vidéo</a>
+    <a href="exercices/{{exercice.id}}/flags" class="ml-2 btn btn-sm btn-success"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Flags</a>
+    <button type="button" ng-click="syncExo()" ng-class="{'disabled': inSync}" class="ml-2 btn btn-sm btn-light"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Synchroniser</button>
+    <a href="{{exercice.forge_link}}" target="_blank" class="ml-2 btn btn-sm btn-dark" ng-if="exercice.forge_link"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Voir sur la forge</a>
+  </div>
+</div>
 
 <div class="row mb-5">
 
diff --git a/admin/static/views/sync.html b/admin/static/views/sync.html
index a457e6ed..cef9e825 100644
--- a/admin/static/views/sync.html
+++ b/admin/static/views/sync.html
@@ -75,7 +75,7 @@
       </a>
     </h3>
     <ul>
-      <li ng-repeat="item in line">{{ item }}</li>
+      <li ng-repeat="item in line" class="text-break">{{ item }}</li>
     </ul>
   </div>
 </div>
diff --git a/admin/static/views/theme.html b/admin/static/views/theme.html
index 64477a39..bc03a3cc 100644
--- a/admin/static/views/theme.html
+++ b/admin/static/views/theme.html
@@ -1,7 +1,11 @@
-<h2>
-  {{theme.name}} <small>{{theme.authors | stripHTML}}</small>
-  <a href="{{theme.forge_link}}" target="_blank" class="float-right ml-2 btn btn-sm btn-dark" ng-if="theme.forge_link"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Voir sur la forge</a>
-</h2>
+<div class="d-flex align-items-start">
+  <h2 class="text-truncate">
+    {{theme.name}} <small class="text-muted" title="{{theme.authors | stripHTML}}">{{theme.authors | stripHTML}}</small>
+  </h2>
+  <div class="ml-auto d-flex flex-row-reverse text-nowrap">
+    <a href="{{theme.forge_link}}" target="_blank" class="ml-2 btn btn-sm btn-dark" ng-if="theme.forge_link"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Voir sur la forge</a>
+  </div>
+</div>
 
 <div class="row">
   <form ng-submit="saveTheme()" class="col-4">