|
1
|
|
|
2
|
<!--
|
|
3
|
=============================
|
|
4
|
HTML if Viewing Your profile
|
|
5
|
=============================
|
|
6
|
-->
|
|
7
|
<div id="cacap-message">
|
|
8
|
<p><strong>New CUNY Academic Commons Profiles</strong> </p>
|
|
9
|
<p>We’ve made a lot of changes to your profile page. Our goal is to give you a more professional place to call your own with an improved design, customization and more features.
|
|
10
|
<br>Click the Edit button to jump in and start customizing or click the link below to learn more about the changes.
|
|
11
|
<br> <a href="xxx">Learn more about the changes</a>
|
|
12
|
</p>
|
|
13
|
<p class="action"><a href="xxx">Hide Message</a></p>
|
|
14
|
</div>
|
|
15
|
|
|
16
|
<!--
|
|
17
|
=============================
|
|
18
|
HTML if Viewing somone else's profile
|
|
19
|
=============================
|
|
20
|
-->
|
|
21
|
|
|
22
|
<div id="cacap-message">
|
|
23
|
<p><strong>New CUNY Academic Commons Profiles!</strong> </p>
|
|
24
|
<p>We’ve made a lot of changes to your profile page. Our goal is to give you a more professional place to call your own with an improved design, customization and more features.
|
|
25
|
<br>You can <a href="http://commons.gc.cuny.edu/members/cstein/profile">click here to view your new profile </a>or click the link below to learn more about the changes.
|
|
26
|
<br> <a href="xxx">Learn more about the changes</a>
|
|
27
|
</p>
|
|
28
|
<p class="action"><a href="xxx">Hide Message</a></p>
|
|
29
|
</div>
|
|
30
|
|
|
31
|
<!--
|
|
32
|
==========================
|
|
33
|
Note on optoins for no JS fallback, could be implemented later
|
|
34
|
==========================
|
|
35
|
|
|
36
|
If you want to do a simple fallback for those without JS then you could have the message showing by default and add visibility:hidden; to the #cacap-message .action selector. The JS would change the visibility:visible; so users with JS could see the button. -->
|
|
37
|
|
|
38
|
<!--
|
|
39
|
=============================
|
|
40
|
CSS for the message
|
|
41
|
=============================
|
|
42
|
-->
|
|
43
|
|
|
44
|
#cacap-content {
|
|
45
|
margin-top: 17px;
|
|
46
|
}
|
|
47
|
|
|
48
|
#cacap-message {
|
|
49
|
background-color: #ffffe0;
|
|
50
|
border: 2px solid #fc7;
|
|
51
|
padding: 10px;
|
|
52
|
position: relative; //need this to allow .action to be positioned.
|
|
53
|
//below is to do the showing and hiding with css transition. You would have JS that would change the max-height between 18px and 100% to hide and show. It would also have to change the text in p.action between "Show Message" and "Hide Message"
|
|
54
|
overflow: hidden;
|
|
55
|
-webkit-transition: max-height 1s ease-out;
|
|
56
|
-moz-transition: max-height 1s ease-out;
|
|
57
|
-o-transition: max-height 1s ease-out;
|
|
58
|
-ms-transition: max-height 1s ease-out;
|
|
59
|
transition: max-height 1s ease-in-out;
|
|
60
|
max-height: 100%;
|
|
61
|
}
|
|
62
|
|
|
63
|
#cacap-message strong {
|
|
64
|
font-weight: bold;
|
|
65
|
}
|
|
66
|
|
|
67
|
#cacap-message .action {
|
|
68
|
position: absolute;
|
|
69
|
//these should be same as padding in #cacap-message
|
|
70
|
bottom: 10;
|
|
71
|
right: 10;
|
|
72
|
}
|
