Skip to content

Commit 7ca903a

Browse files
DixonsCarphoneCRMDixonsCarphoneCRM
committed
Major UI fixes and Responsive support
Added: Whitelisted domain query checks Updated button to href with Firefox fix for on clicks Added click off functionality for dropdowns Added Github logo and repo link Updated CSS and cleaned it up. CSS for tool checks are mostly at the bottom of UI Updated fauxImg to be display-inline block Added Media query for 649px and below for mobile friendly navbar
1 parent d09c8b9 commit 7ca903a

3 files changed

Lines changed: 201 additions & 99 deletions

File tree

‎css/core.css‎

Lines changed: 110 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
11
body,
22
html {
3-
position: relative;
3+
position: relative;
4+
}
5+
body {
6+
margin-top: 70px;
7+
border-top: 1px solid #cccccc;
48
}
59
#navBar {
610
padding-bottom:0px!important;
711
}
8-
nav {
9-
overflow:hidden;
10-
}
1112
nav ul {
1213
list-style-type: none;
1314
margin: 0;
1415
padding: 0;
1516
}
1617
nav li {
1718
float:left;
18-
border-bottom: 1px solid rgba(19, 70, 21, 0.7);
19-
box-sizing: border-box;
20-
}
21-
.structureToggle {
22-
border-right: 1px solid rgba(19, 70, 21, 0.7);
23-
}
24-
nav li:hover {
19+
box-sizing: border-box;
2520
}
2621
.fixed {
2722
position: fixed;
2823
top: 0;
2924
left: 0;
3025
z-index: 2;
3126
}
32-
#navBar + .content {
33-
padding-top: 100px;
27+
.fixed:after {
28+
left: 100%;
29+
background: #4caf50;
30+
bottom: 0;
31+
content: "";
32+
position: absolute;
33+
top: 0;
34+
width: 9999px;
35+
height: 48px;
3436
}
3537
nav a,
3638
nav button {
@@ -47,18 +49,80 @@ nav button {
4749
outline: none;
4850
display:block;
4951
margin:0;
52+
}
53+
.dropdown button, .dropdown a {
5054
width: 100%;
5155
}
52-
button:hover {
56+
nav a:hover, button:hover {
5357
filter: brightness(100%) contrast(120%);
5458
-webkit-filter: brightness(100%) contrast(130%);
5559
}
60+
.logo {
61+
color: #6fff75;
62+
text-shadow: 0px 1px 2px #317134;
63+
}
64+
/* Dropdown styling */
65+
.dropdown {
66+
float: left;
67+
overflow: hidden;
68+
}
69+
.dropdown .dropbtn {
70+
font-size: 16px;
71+
padding: 15px 15px;
72+
border: none;
73+
outline: none;
74+
color: white;
75+
cursor: default;
76+
}
77+
/* Triangle for Dropdown */
78+
.fa {
79+
position: relative;
80+
display: inline-block;
81+
width: 5px;
82+
}
83+
.fa:before {
84+
content: "";
85+
position: absolute;
86+
top: -9px;
87+
left: 0px;
88+
border-left: 4px solid transparent;
89+
border-right: 4px solid transparent;
90+
border-top: 8px solid #fff;
91+
}
92+
.dropdown:hover .dropbtn, .active {
93+
background-color: orange;
94+
}
95+
.dropdown-content {
96+
display: none;
97+
position: absolute;
98+
z-index: 1;
99+
}
100+
.dropdown-content a, .dropdown-content button {
101+
float: none;
102+
color: white;
103+
display: block;
104+
border-bottom: 1px solid #347736;
105+
text-align: left;
106+
}
107+
.dropdown-content a:first-child, .dropdown-content button:first-child {
108+
border-top: 1px solid #946000;
109+
}
110+
.dropdown-content a:last-child, .dropdown-content button:last-child {
111+
border:none;
112+
}
113+
114+
.dropdown:hover .dropdown-content {
115+
display: block;
116+
position:relative;
117+
}
118+
56119
.dropLt {
57120
min-width:105px;
58121
}
59122
.redB {
60123
background-color: #f44336;
61124
}
125+
62126
/* Tooltips: position start */
63127
.yes a[href^="#"],
64128
.yes a[href*="##"],
@@ -68,7 +132,6 @@ button:hover {
68132
.sTable table:not([role*="presentation"]),
69133
.sTable td > table + table,
70134
.sTable th > table + table,
71-
.altText .fauxImg,
72135
a[href*="#srcid=11026"],
73136
a[href*="?intcmp"],
74137
a[href*="http://t.e.currys.co.uk"],
@@ -79,11 +142,15 @@ a[href*=" ?"] {
79142
-webkit-filter: drop-shadow(0px 0px 3px rgba(255, 0, 0, 0.8));
80143
drop-shadow: (0px 0px 3px rgba(255, 0, 0, 0.8));
81144
}
145+
.altText .fauxImg {
146+
position: relative;
147+
}
82148
.yes a[href^="#"],
83149
.yes a[href*="##"],
84150
.pageType a[href*="PageType"],
85151
.category a[href*="Category"],
86152
.label a[_label*="_Category"],
153+
.altText .fauxImg,
87154
a[href*="#srcid"],
88155
a[href*="?intcmp"],
89156
a[href*="http://t.e.currys.co.uk"],
@@ -181,6 +248,8 @@ a[href*="http://t.e.currys.co.uk"]:after {
181248
content: "Old-send ESP URL";
182249
width: 200px;
183250
}
251+
/* PCWB global tracking exists */
252+
184253
/* Missing tracking ? */
185254
.missingQuery:after {
186255
content: "Missing: ?";
@@ -242,55 +311,6 @@ td[background].bgImage {
242311
drop-shadow: (0px 0px 5px rgba(204, 0, 153, .5));
243312
}
244313

245-
/* Dropdown styling */
246-
.dropdown {
247-
float: left;
248-
overflow: hidden;
249-
}
250-
.dropdown .dropbtn {
251-
font-size: 16px;
252-
padding: 15px 15px;
253-
border: none;
254-
outline: none;
255-
color: white;
256-
cursor: default;
257-
}
258-
/* Triangle for Dropdown */
259-
.fa {
260-
position: relative;
261-
display: inline-block;
262-
width: 5px;
263-
}
264-
.fa:before {
265-
content: "";
266-
position: absolute;
267-
top: -9px;
268-
left: 0px;
269-
border-left: 4px solid transparent;
270-
border-right: 4px solid transparent;
271-
border-top: 8px solid #fff;
272-
}
273-
.dropdown:hover .dropbtn, .active {
274-
background-color: orange;
275-
border-bottom: 1px solid rgba(0,0,0,0.2);
276-
}
277-
.dropdown-content {
278-
display: none;
279-
position: absolute;
280-
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
281-
z-index: 1;
282-
}
283-
.dropdown-content a, .dropdown-content button {
284-
float: none;
285-
color: white;
286-
display: block;
287-
border-bottom: 1px solid rgba(0,0,0,.2);
288-
text-align: left;
289-
}
290-
.dropdown:hover .dropdown-content {
291-
display: block;
292-
position:relative;
293-
}
294314

295315
.spam .red, .spam .orange, .spam .spamBG2 {
296316
color:white; letter-spacing:0; padding: 2px 4px; margin: -2px 3px 0 3px; display:inline-block; border-radius:3px; -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 0, 0, 0.8)); drop-shadow: (0px 0px 3px rgba(255, 0, 0, 0.8)); text-shadow: 0 2px 0 2px rgba(0, 0, 0, 1);
@@ -300,4 +320,29 @@ td[background].bgImage {
300320
.spam .spamBG2 { background-color:rgba(204, 0, 153,.7);}
301321

302322
/* Fix to hide for Dropdown */
303-
.sT, .lT {display:none;}
323+
.sT, .lT {display:none;}
324+
325+
/* MQ */
326+
@media only screen and (min-width: 0px) and (max-width: 649px) {
327+
body {
328+
margin-top: 220px;
329+
}
330+
.task_flyout {
331+
width:100%;
332+
}
333+
nav li {
334+
float:none;
335+
}
336+
.dropdown {
337+
float: none;
338+
overflow: hidden;
339+
}
340+
nav a, nav button, .dropdown .dropbtn {
341+
font-size: 14px;
342+
padding: 8px 8px;
343+
width: 100%;
344+
}
345+
nav li {
346+
border-bottom: 1px solid #347736;
347+
}
348+
}

‎emailTools.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,42 @@
105105
</table>
106106
</td>
107107
</tr>
108+
<!-- 1BNR1 -->
109+
<tr>
110+
<td align="center" style="padding: 20px 0px 30px 0px;">
111+
<table role="presentation" width="650" border="0" align="center" cellpadding="0" cellspacing="0" class="dw3">
112+
<tbody>
113+
<tr>
114+
<!-- TH -->
115+
<th align="center" width="650" bgcolor="#f5f5f5" class="dw db" style="border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;">
116+
<table role="presentation" width="100%" class="dw3" border="0" cellspacing="0" cellpadding="0">
117+
<tr>
118+
<th width="10" height="10" class="dw db">&nbsp;</th>
119+
<th width="280" class="dw db" style="font-weight:normal;">
120+
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
121+
<tr>
122+
<td align="center"><a href="https://www.idmobile.co.uk/upgrades?utm_source=<%= TrackingSource %>&utm_medium=<%= TrackingMedium %>&utm_campaign=<%= TrackingCampaign %>&utm_content=MainBNR" _label="MainBNR_OTH"><img align="center" width="280" height="213" src="https://currys-ssl.cdn.dixons.com/css/themes/email/iD/2018-2019/retention/props/up_retbnr03.png" border="0" class="cta" alt=" Upgrade and save" style="display:block;" /></a></td>
123+
</tr>
124+
</table>
125+
</th>
126+
<th width="10" height="10" class="dw db">&nbsp;</th>
127+
<th width="340" class="dw db" style="font-weight:normal;">
128+
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
129+
<tr>
130+
<td class="hAuto" align="center" valign="middle" style="padding: 20px 0px 20px 0px;"><a href="https://www.idmobile.co.uk/upgradesutm_source=<%= TrackingSource %>&utm_medium=<%= TrackingMedium %>&utm_campaign=<%= TrackingCampaign %>&utm_content=MainBNR" _label="MainBNR_OTH" style="font-family: gtwBold, Arial Black, Helvetica, sans-serif; font-size: 32px; line-height:34px; color:#6ab978; text-decoration: none;">Save up to &pound;30 off any&nbsp;phone.</a></td>
131+
</tr>
132+
</table>
133+
</th>
134+
<th width="10" height="10" class="dw db">&nbsp;</th>
135+
</tr>
136+
</table>
137+
</th>
138+
<!-- // TH -->
139+
</tr>
140+
</tbody>
141+
</table>
142+
</td>
143+
</tr>
108144
<!-- External Image call like KickDynamics -->
109145
<tr>
110146
<td style="padding:20px 0px 0px 0px;">

0 commit comments

Comments
 (0)