WordPress.org

Making WordPress.org

Ticket #1664: html_and_css_changes.2.html

File html_and_css_changes.2.html, 5.8 KB (added by audrasjb, 3 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>