Mercurial > gemma
comparison client/src/components/Popup.vue @ 2387:f185503ef35a
client: unified box's header styles by creating a reusable component
The clients html/css and resulting look and feel of the app is partially very inconsistent.
By moving code to more small and reusable components consistency will hopefully be increased.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 25 Feb 2019 15:02:34 +0100 |
| parents | c06b001dc26b |
| children | dda4cec8e67b |
comparison
equal
deleted
inserted
replaced
| 2386:24e3e86b8cb6 | 2387:f185503ef35a |
|---|---|
| 3 <div | 3 <div |
| 4 class="overlay d-flex justify-content-center align-items-center" | 4 class="overlay d-flex justify-content-center align-items-center" |
| 5 v-if="popup" | 5 v-if="popup" |
| 6 > | 6 > |
| 7 <div class="popup"> | 7 <div class="popup"> |
| 8 <h6 class="popup-header"> | 8 <UIBoxHeader |
| 9 <span class="popup-title"> | 9 :icon="popup.icon" |
| 10 <font-awesome-icon :icon="popup.icon" class="popup-icon" /> | 10 :title="popup.title" |
| 11 {{ popup.title }} | 11 :closeCallback="close" |
| 12 </span> | 12 /> |
| 13 <span class="popup-close" @click="close()"> | |
| 14 <font-awesome-icon icon="times" /> | |
| 15 </span> | |
| 16 </h6> | |
| 17 <div class="popup-content" v-html="popup.content"></div> | 13 <div class="popup-content" v-html="popup.content"></div> |
| 18 <div class="popup-footer" v-if="popup.cancel || popup.confirm"> | 14 <div class="popup-footer" v-if="popup.cancel || popup.confirm"> |
| 19 <button | 15 <button |
| 20 class="btn btn-sm btn-warning" | 16 class="btn btn-sm btn-warning" |
| 21 @click="cancel" | 17 @click="cancel" |