minor layout fixes

Razumain · Apr 19, 2018 · 2d31623 · 2d31623
1 parent 58d7d3c
commit 2d31623
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 40 deletions.
diff --git a/src/pyff/site/static/css/ra21.css b/src/pyff/site/static/css/ra21.css
@@ -36,7 +36,6 @@ h2 img {
 a.identityprovider {
     display: inline-block;
 	vertical-align: middle;
-    height: 73px;
     width: 100%;
 }
 
@@ -295,28 +294,19 @@ p {
 .card-links a li {
   margin: 0;
   padding: 14px 6px;
-  border-left: 1px solid #fff;
+  border-left: 3px solid #fff;
   transition: background-color 0.2s ease,
               border-left 0.2s ease,
               color 0.2s ease;
 	cursor: pointer;
-	min-width: 0;
 }
 
-.card-links a li div span {
-	white-space: nowrap;
-  	overflow: hidden;
-  	text-overflow: ellipsis;
-}
-
-.card-links a li:hover {
+.card-links a:hover li {
   border-left: 3px solid #033D83;
   background: #FFFFFF;
   color: #44474a;
-	cursor: pointer;
 }
 
-
 .card-links a li > i {
 	float: right;
 	color: #147dfa;
@@ -411,32 +401,23 @@ footer .step {
 	float: right;
 }
 
+.label {
+	max-width: 60%;
+}
+
 .label-url {
 	float: right;
 	padding-right: 35px;
 	color: #ABABAB;
-	margin-left: auto;
-}
-
-.d-flex > span.label {
-	margin-right: auto;
-}
-
-.d-flex > span.label-url {
-	margin-left: auto;
-	max-width: 30%;
-}
-
-.d-flex > i.cancel {
-	margin-left: auto;
+	max-width: 40%;
 }
 
-.d-flex > span.searchaux {
+span.searchaux {
 	max-width: 75%;
 	font-size: small;
 }
 
-.d-flex > span.searchmatch {
+span.searchmatch {
 	max-width: 75%;
 	font-size: x-small;
 }

diff --git a/src/pyff/templates/ra21.html b/src/pyff/templates/ra21.html
@@ -72,7 +72,7 @@ <h1>{{ _('Choose Your Institution') }}
 				  <div class="collapse" id="addwidget">
 					  <hr>
 					  <a data-toggle="collapse" href="#searchwidget" role="button" aria-expanded="false" aria-controls="searchwidget">
-						  <li><div class="d-flex flex-row"><span class="label">Choose another</span><i id="add_circle" class="far fa-plus-circle"></i></div></li>
+						  <li><span class="label">Choose another</span><i id="add_circle" class="float-right far fa-plus-circle"></i></li>
 					  </a>
 				  </div>
 			  </ul>
@@ -178,25 +178,22 @@ <h3>4. Explore</h3>
 
 			{% raw %}
 		    var search = Hogan.compile('<a class="institution identityprovider" data-href="{{entity_id}}">\
-                <li><div class="d-flex flex-row">\
-                       <span class="label">{{title}}</span>{{#scopes}}<span class="label-url">{{scopes}}</span>{{/scopes}}\
-                       <div class="external"><i class="far fa-external-link"></i></div>\
-                    </div>\
-                    {{#descr}}<div class="d-flex flex-row"><span class="searchaux">{{descr}}</span></div>{{/descr}}\
-                    <div class="d-flex flex-row">\
-                       <span class="searchmatch">Search matched&nbsp;<em>{{matched}}</em></span>\
-                    </div></li></a>');
+                <li><div class="d-block"><span class="text-truncate label">{{title}}</span>{{#scopes}}<span class="text-truncate label-url">{{scopes}}</span>{{/scopes}}\
+                     <div class="float-right external"><i class="far fa-external-link"></i></div></div>\
+                    {{#descr}}<div class="d-block"><span class="searchaux text-truncate">{{descr}}</span>{{/descr}}</div>\
+                    <div class="d-block"><span class="searchmatch text-truncate">Search matched&nbsp;<em>{{matched}}</em></span></div>\
+                </li></a>');
 			var saved = Hogan.compile('<a class="identityprovider" data-href="{{entity_id}}">\
-                <li class="known-inst"><div class="d-flex flex-row">\
+                <li class="known-inst">\
                 {{#entity_icon}}\
                 <img src="{{entity_icon}}" onError="$(this).attr(\'src\',\'/static/icons/1x1t.png\');" class="img-thumbnail rounded-circle logo">\
                 {{/entity_icon}}\
                 {{^entity_icon}}\
                 <svg class="logo" width="40" height="40"><circle cx="20" cy="20" r="20" fill="#aeaeae" />\
                 <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="12px" font-family="Arial" dy=".3em">{{name_tag}}</text></svg>\
                 {{/entity_icon}}\
-                <span class="label">{{title}}</span><i class="cancel far fa-times-circle"></i>\
-                </div></li></a>');
+                <span class="label">{{title}}</span><i class="cancel float-right far fa-times-circle"></i>\
+                </li></a>');
 			var no_results = Hogan.compile('<div class="alert alert-info mt-3" role="alert"><h3>No matching institution found</h3><ul><li>Try institution name, your institution email, or an abbreviation</li><li>Contact your institution librarian</li></ul></div>');
 			{% endraw %}