comparison index.xhtml @ 23:e99984564b17

Implement a tab system, thanks Zash!
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sun, 23 Dec 2018 14:00:59 +0100
parents 46660687924b
children 6c620e9f7d2c
comparison
equal deleted inserted replaced
22:07e33207e598 23:e99984564b17
47 </form> 47 </form>
48 </div> 48 </div>
49 49
50 <div id="connected" hidden=""> 50 <div id="connected" hidden="">
51 51
52 <div class="row"> 52 <div id="navtabs" class="nav nav-tabs nav-justified">
53 <li id="tab-profile" class="active"><a href="#profile">Profile</a></li>
54 <li id="tab-mam"><a href="#mam">Message Archiving</a></li>
55 <li id="tab-pep"><a href="#pep">PEP</a></li>
56 <li id="tab-account"><a href="#account">Account</a></li>
57 </div>
58
59 <div class="row tab-profile">
53 <div class="col-sm-4"> 60 <div class="col-sm-4">
54 <h2>Nickname</h2> 61 <h2>Nickname</h2>
55 </div> 62 </div>
56 <div class="col-sm-8"> 63 <div class="col-sm-8">
57 <p> 64 <p>
62 Enter your nickname, so people you know can recognize you. 69 Enter your nickname, so people you know can recognize you.
63 </p> 70 </p>
64 </div> 71 </div>
65 </div> 72 </div>
66 73
67 <hr/> 74 <hr class="tab-profile"/>
68 75
69 <div class="row"> 76 <div class="row tab-profile">
70 <div class="col-sm-4"> 77 <div class="col-sm-4">
71 <h2>Avatar</h2> 78 <h2>Avatar</h2>
72 <p>This image allows your contact to quickly identify you.</p> 79 <p>This image allows your contact to quickly identify you.</p>
73 </div> 80 </div>
74 <div class="col-sm-8"> 81 <div class="col-sm-8">
83 </select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/> 90 </select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
84 </p> 91 </p>
85 </div> 92 </div>
86 </div> 93 </div>
87 94
88 <hr/> 95 <div class="row tab-account" hidden="">
89
90 <div class="row">
91 <div class="col-sm-4"> 96 <div class="col-sm-4">
92 <h2>Contact list</h2> 97 <h2>Contact list</h2>
93 </div> 98 </div>
94 <div class="col-sm-8"> 99 <div class="col-sm-8">
95 <table> 100 <table>
99 <tbody id="roster-table"/> 104 <tbody id="roster-table"/>
100 </table> 105 </table>
101 </div> 106 </div>
102 </div> 107 </div>
103 108
104 <hr/> 109 <hr class="tab-account" hidden=""/>
105 110
106 <div class="row"> 111 <div class="row tab-account" hidden="">
112 <div class="col-sm-4">
113 <h2>Dangerous zone</h2>
114 </div>
115 <div class="col-sm-8">
116 <p>
117 <button disabled="">Change my password</button>
118 <button disabled="">⚠️ Delete my account</button>
119 </p>
120 </div>
121 </div>
122
123 <div class="row tab-pep" hidden="">
107 <div class="col-sm-4"> 124 <div class="col-sm-4">
108 <h2>PEP</h2> 125 <h2>PEP</h2>
109 </div> 126 </div>
110 <div class="col-sm-8"> 127 <div class="col-sm-8">
111 <table> 128 <table>
115 <tbody id="pep-table"/> 132 <tbody id="pep-table"/>
116 </table> 133 </table>
117 </div> 134 </div>
118 </div> 135 </div>
119 136
120 <hr/> 137 <div class="row tab-mam" hidden="">
121
122 <div class="row">
123 <div class="col-sm-4">
124 <h2>Dangerous zone</h2>
125 </div>
126 <div class="col-sm-8">
127 <p>
128 <button disabled="">Change my password</button>
129 <button disabled="">⚠️ Delete my account</button>
130 </p>
131 </div>
132 </div>
133
134 <hr/>
135
136 <div class="row">
137 <div class="col-sm-4"> 138 <div class="col-sm-4">
138 <h2>Message Archiving</h2> 139 <h2>Message Archiving</h2>
139 </div> 140 </div>
140 <div class="col-sm-8"> 141 <div class="col-sm-8">
141 <p> 142 <p>