Skip to content

Commit f2c366b

Browse files
claydiffrientccutrer
claydiffrient
authored and
ccutrer
committed
Adjusts external apps to account for long app names
Converts external_tools.sass -> scss while adding a few styles to truncate the names properly. The styles added convert the table to render using the fixed style and the first column to have a width of 500px and overflow the text using ellipsis. A title attribute is also added to the column to help with UX. fixes CNVS-7223 test plan: - Go to Settings > Apps - Add an app with a long name around 160 characters - You should see that the name is truncated with an ellipsis - Hover over the name - A tooltip with the full name should appear Change-Id: I24cc71a0073799e66efa57421b80b0b70bdbecdb
1 parent 0b57ec3 commit f2c366b

4 files changed

Lines changed: 217 additions & 156 deletions

File tree

‎app/stylesheets/pages/account_settings/compiler-account_settings.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
@import "base/environment";
22
@import "themes/feature_flags";
33
@import "pages/account_settings/account_settings.sass";
4-
@import "pages/shared/external_tools.sass";
4+
@import "pages/shared/external_tools.scss";

‎app/stylesheets/pages/shared/_external_tools.sass‎

Lines changed: 0 additions & 154 deletions
This file was deleted.

‎app/stylesheets/pages/shared/_external_tools.scss‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
// Shared between:
2+
// - course_settings/compiler-course_settings.scss
3+
// - account-settings/account-settings.scss
4+
5+
$app_width: 260px;
6+
$app_height: 145px;
7+
8+
.star-sprite {
9+
display: block;
10+
width: 46px;
11+
height: 8px;
12+
margin-top: 5px;
13+
overflow: hidden;
14+
background-image: url(/images/star-sprite.png);
15+
background-position: 0px 0px;
16+
&.star-sprite-1 {
17+
background-position: 0 -8px;
18+
}
19+
&.star-sprite-2 {
20+
background-position: 0 -16px;
21+
}
22+
&.star-sprite-3 {
23+
background-position: 0 -24px;
24+
}
25+
&.star-sprite-4 {
26+
background-position: 0 -32px;
27+
}
28+
&.star-sprite-5 {
29+
background-position: 0 -40px;
30+
}
31+
}
32+
33+
#wrapper-container {
34+
min-width: 1280px;
35+
}
36+
37+
#external_tools {
38+
h2 {
39+
margin: 10px 0;
40+
}
41+
p.description {
42+
margin-bottom: 15px;
43+
}
44+
.well {
45+
border: none;
46+
}
47+
.text-right {
48+
text-align: right;
49+
}
50+
.lm {
51+
margin-left: 5px;
52+
}
53+
table {
54+
table-layout: fixed;
55+
}
56+
.external_tool_item {
57+
.external_tool {
58+
width: 500px;
59+
white-space: nowrap;
60+
overflow: hidden;
61+
text-overflow: ellipsis;
62+
}
63+
}
64+
.app-full-view {
65+
td {
66+
border: none;
67+
}
68+
td.app-full-view-left {
69+
width: 255px;
70+
}
71+
h2 {
72+
margin: 0;
73+
}
74+
.add_app {
75+
margin: 10px 0 5px;
76+
}
77+
.app_cancel {
78+
font-size: 12px;
79+
}
80+
}
81+
.reviews {
82+
margin-top: 5px;
83+
.avatar {
84+
padding-left: 65px;
85+
min-height: 65px;
86+
}
87+
.review-item {
88+
border-top: thin solid #eeeeee;
89+
padding-top: 10px;
90+
}
91+
.review-item-header {
92+
margin-top: 0px;
93+
font-size: 12px;
94+
color: #a1a3a2;
95+
span {
96+
color: #666666;
97+
}
98+
}
99+
}
100+
.app_center {
101+
.app_list {
102+
.app {
103+
cursor: pointer;
104+
width: $app_width;
105+
height: $app_height;
106+
position: relative;
107+
float: left;
108+
border: thin solid #eeeeee;
109+
margin: 0 2px 2px 0;
110+
.banner_image {
111+
width: $app_width - 40;
112+
height: $app_height - 40;
113+
position: relative;
114+
top: 20px;
115+
left: 20px;
116+
}
117+
.details {
118+
position: absolute;
119+
top: 0px;
120+
width: $app_width;
121+
height: $app_height;
122+
background-color: black;
123+
color: white;
124+
display: none;
125+
.content {
126+
padding: 15px;
127+
.name {
128+
font-weight: bold;
129+
font-size: 14px;
130+
color: #d6ecfc;
131+
}
132+
.desc {
133+
margin-top: 5px;
134+
font-size: 11px;
135+
line-height: 17px;
136+
}
137+
}
138+
}
139+
}
140+
}
141+
}
142+
.individual-app {
143+
.gray-box-centered {
144+
text-align: center;
145+
color: #666666;
146+
background-color: #efefef;
147+
padding: 10px;
148+
}
149+
.individual-app-left {
150+
width: 250px;
151+
padding-right: 20px;
152+
text-align: center;
153+
.add_app {
154+
margin-top: 10px;
155+
}
156+
.app_cancel {
157+
display: block;
158+
margin-top: 5px;
159+
}
160+
}
161+
.individual-app-right {
162+
h2 {
163+
margin: 0px;
164+
}
165+
.data-label {
166+
color: #888888;
167+
text-align: right;
168+
padding-right: 10px;
169+
}
170+
.data-value {
171+
ul {
172+
margin: 0px;
173+
padding: 0px;
174+
list-style: none;
175+
}
176+
}
177+
.star-table {
178+
margin-bottom: 10px;
179+
td {
180+
padding: 0px;
181+
}
182+
}
183+
}
184+
}
185+
.add-review {
186+
margin-top: 20px;
187+
padding-top: 5px;
188+
border-top: thin solid #eeeeee;
189+
.rate_app {
190+
font-weight: bold;
191+
}
192+
}
193+
.review-item {
194+
margin: 0 0 10px 0;
195+
td {
196+
&.image-and-stars {
197+
padding: 10px 0 0 10px;
198+
width: 58px;
199+
img {
200+
max-width: 50px;
201+
}
202+
}
203+
&.review-content {
204+
.review-item-header {
205+
font-size: 12px;
206+
}
207+
}
208+
}
209+
}
210+
}
211+
212+
fieldset.rate_app_wrapper {
213+
margin: 0px;
214+
}

‎app/views/jst/ExternalTools/ExternalToolView.handlebars‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<td nowrap="nowrap"
22
class="external_tool"
33
data-id="{{id}}"
4-
data-workflow-state="{{workflow_state}}">{{name}}</td>
4+
data-workflow-state="{{workflow_state}}"
5+
title="{{name}}">{{name}}</td>
56
<td>
67
{{#each extras}}
78
<span class="label label-primary {{this.extension_type}}" data-tooltip title="{{this.text}}">{{titleize this.extension_type}}</span>

0 commit comments

Comments
 (0)