Making WordPress.org

Ticket #1664: html_and_css_changes.2.html

File html_and_css_changes.2.html, 5.8 KB (added by audrasjb, 9 years ago)

HTML and CSS changes - 2

Line 
1<!-- Add a new "Translations" tab -->
2<div id="content-tabs" class="info-group">
3 <ul>
4 <li class="inactive">
5 <a href="https://profiles.wordpress.org/audrasjb#content-about">About Me</a>
6 </li>
7
8 <li class="inactive">
9 <a href="https://profiles.wordpress.org/audrasjb#content-activity">Activity</a>
10 </li>
11
12 <li class="inactive">
13 <a href="https://profiles.wordpress.org/audrasjb#content-plugins">Plugins</a>
14 </li>
15 <!-- THIS ONE IS NEW -->
16 <li class="inactive">
17 <a href="https://profiles.wordpress.org/audrasjb#content-translations">Translations</a>
18 </li>
19 </ul>
20</div> <!-- #content-tabs -->
21
22
23<!-- "Translations" panel content -->
24<div id="content-translations" class="info-group inactive">
25
26 <div class="translations translations-gte-locales">
27 <h3>General Translation Editor of the following locales</h3>
28 <ul>
29 <li>
30 <a href="https://profiles.wordpress.org/audrasjb">French (France) – fr_FR</a>
31 </li>
32 </ul>
33 </div>
34
35 <div class="translations translations-pte-plugins">
36 <h3>Project Translation Editor of the following plugins</h3>
37 <ul>
38 <li>
39 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
40 <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>
41 </a>
42 <h3>
43 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE</a>
44 </h3>
45 </li>
46 <li>
47 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
48 <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>
49 </a>
50 <h3>
51 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
52 </h3>
53 </li>
54 <li>
55 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
56 <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>
57 </a>
58 <h3>
59 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
60 </h3>
61 </li>
62 <li>
63 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">
64 <div class="plugin-icon" id="plugin-icon-abbreviation-button-for-tinymce"></div>
65 </a>
66 <h3>
67 <a href="https://wordpress.org/plugins/abbreviation-button-for-tinymce/">Abbreviation button for TinyMCE (fr_FR)</a>
68 </h3>
69 </li>
70 </ul>
71 </div>
72
73 <div class="translations translations-pte-themes">
74 <h3>Project Translation Editor of the following themes</h3>
75 <ul>
76 <li>
77 <h3>
78 <a href="https://wordpress.org/themes/maker">
79 <img width="200" height="150" src="./WordPress › Profiles » audrasjb_files/screenshot.png" alt="Maker"><br>
80 Maker
81 </a>
82 </h3>
83 <p class="user-rating">My rating</p>
84 <div class="wporg-ratings" title="5 out of 5 stars" style="color:#ffb900;"><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
85 </div>
86 </li>
87 </ul>
88 </div>
89
90 <div class="translations translations-activity">
91 <h3>Last activity</h3>
92 <ul>
93 <li>
94 <p>Translated some strings in project <a href="#">A cool theme (fr_FR)</a></p>
95 <p class="ago">1 day ago</p>
96 </li>
97 <li>
98 <p>Translated some strings in project <a href="#">WordPress 4.9 (fr_FR)</a></p>
99 <p class="ago">1 day ago</p>
100 </li>
101 <li>
102 <p>Translated some strings in project <a href="#">A cool plugin (de_DE)</a></p>
103 <p class="ago">1 day ago</p>
104 </li>
105 <li>
106 <p>Translated some strings in project <a href="#">A cool plugin (fr_FR)</a></p>
107 <p class="ago">1 day ago</p>
108 </li>
109 <li>
110 <p>Translated some strings in project <a href="#">Plugin Directory (fr_FR)</a></p>
111 <p class="ago">1 day ago</p>
112 </li>
113 <li>
114 <p>Translated some strings in project <a href="#">Maker (fr_FR)</a></p>
115 <p class="ago">1 day ago</p>
116 </li>
117 <li>
118 <p>Translated some strings in project <a href="#">Maker (fr_FR)</a></p>
119 <p class="ago">1 day ago</p>
120 </li>
121 </ul>
122 </div>
123
124</div>
125
126<style>
127/* CSS rules to add/edit */
128#content-favorites .favorites > h3:before, #content-translations .translations > h3:before, ul#activity-list li:before {
129 font: normal 20px/1 'dashicons';
130 float: left;
131 margin-left: -25px;
132 margin-top: 0;
133 content: "\f111";
134 -webkit-font-smoothing: antialiased;
135 -moz-osx-font-smoothing: grayscale;
136}
137#content-translations .translations > h3 {
138 font-size: 16px;
139 margin-bottom: 1em;
140 margin-left: 25px;
141 color: #666;
142}
143#content-translations .translations > ul {
144 margin-bottom: 2em;
145}
146#content-translations .translations-gte-locales > h3:before {
147 content: "\f326";
148}
149#content-translations .translations-pte-plugins > h3:before {
150 content: "\f106";
151}
152#content-translations .translations-pte-themes > h3:before {
153 content: "\f100";
154}
155/**/
156.main-plugins,
157.main-themes
158.main-translations {
159 clear: both;
160}
161 .translations-pte-plugins ul li {
162 display: inline-block;
163 padding-right: 30px;
164 width: 215px;
165 min-height: 95px;
166 margin-bottom: 15px;
167 vertical-align: top;
168 line-height: 1.4;
169 }
170
171 .translations-pte-plugins ul li h3 {
172 margin: 2px 0 4px 0;
173 }
174
175.translations-pte-themes ul li {
176 display: table-cell;
177 float:left;
178 padding-right: 25px;
179 margin-right:0px;
180 width: 360px;
181 margin-bottom:40px;
182 }
183
184 .translations-pte-themes h3 {
185 margin-top: 4px;
186 }
187.pte-all-plugins, .pte-all-themes {
188 margin: 0 0 0.5em;
189}
190.translations-activity ul {
191 margin: 1.5em 0 0 0;
192}
193 .translations-activity ul li {
194 background: none;
195 padding: 0 8px 8px 8px;
196 font-size: 14px;
197 line-height: 1.4;
198 font-weight: normal;
199 padding-bottom: 16px;
200 padding-left: 18px;
201 }
202
203</style>