diff --git a/changes/changelog.d/fomentic.enhancement b/changes/changelog.d/fomentic.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..0f6c4ad9556088a76350a7101191f028f4c1cb46
--- /dev/null
+++ b/changes/changelog.d/fomentic.enhancement
@@ -0,0 +1 @@
+Switched from Semantic-UI to Fomentic-UI
diff --git a/front/package.json b/front/package.json
index ebd520505ee7ee97891606e5b9fa311376e31ad3..54cf3c8e1672d784b57ecf797269db3de8fb4a10 100644
--- a/front/package.json
+++ b/front/package.json
@@ -21,7 +21,7 @@
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"moment": "^2.22.2",
- "semantic-ui-css": "^2.4.1",
+ "fomantic-ui-css": "^2.7",
"showdown": "^1.8.6",
"vue": "^2.5.17",
"vue-gettext": "^2.1.0",
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 994227c63779a635223576ad5bb8d2b75ee3393d..d66c17704feca67bc7c2275347c9f56ac8ab36cf 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -78,7 +78,7 @@
class="two wide column control"
@click.prevent.stop="previous"
:disabled="emptyQueue">
- <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'secondary', 'icon']"></i>
+ <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']"></i>
</span>
<span
role="button"
@@ -87,7 +87,7 @@
:aria-label="labels.play"
@click.prevent.stop="togglePlay"
class="two wide column control">
- <i :class="['ui', 'play', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+ <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']"></i>
</span>
<span
role="button"
@@ -96,7 +96,7 @@
:aria-label="labels.pause"
@click.prevent.stop="togglePlay"
class="two wide column control">
- <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+ <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'icon']"></i>
</span>
<span
role="button"
@@ -105,7 +105,7 @@
class="two wide column control"
@click.prevent.stop="next"
:disabled="!hasNext">
- <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'secondary', 'icon']" ></i>
+ <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" ></i>
</span>
<div
class="wide column control volume-control"
@@ -118,7 +118,7 @@
:title="labels.unmute"
:aria-label="labels.unmute"
@click.prevent.stop="unmute">
- <i class="volume off secondary icon"></i>
+ <i class="volume off icon"></i>
</span>
<span
role="button"
@@ -126,7 +126,7 @@
:title="labels.mute"
:aria-label="labels.mute"
@click.prevent.stop="mute">
- <i class="volume down secondary icon"></i>
+ <i class="volume down icon"></i>
</span>
<span
role="button"
@@ -134,7 +134,7 @@
:title="labels.mute"
:aria-label="labels.mute"
@click.prevent.stop="mute">
- <i class="volume up secondary icon"></i>
+ <i class="volume up icon"></i>
</span>
<input
type="range"
@@ -152,7 +152,7 @@
:aria-label="labels.loopingDisabled"
@click.prevent.stop="$store.commit('player/looping', 1)"
:disabled="!currentTrack">
- <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
+ <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i>
</span>
<span
role="button"
@@ -162,7 +162,7 @@
v-if="looping === 1"
:disabled="!currentTrack">
<i
- class="repeat secondary icon">
+ class="repeat icon">
<span class="ui circular tiny orange label">1</span>
</i>
</span>
@@ -174,7 +174,7 @@
:disabled="!currentTrack"
@click.prevent.stop="$store.commit('player/looping', 0)">
<i
- class="repeat orange secondary icon">
+ class="repeat orange icon">
</i>
</span>
</div>
@@ -187,7 +187,7 @@
@click.prevent.stop="shuffle()"
class="two wide column control">
<div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
- <i v-else :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+ <i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</span>
<div class="one wide column" v-if="!showVolume"></div>
<span
@@ -199,8 +199,8 @@
@click.prevent.stop="clean()"
class="two wide column control">
<i class="icons">
- <i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
- <i :class="['ui corner large inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+ <i :class="['ui', 'trash', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+ <i :class="['ui corner inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</i>
</span>
</div>
@@ -820,7 +820,7 @@ export default {
vertical-align: middle;
}
-.secondary.icon {
+.control .icon {
font-size: 1.5em;
}
.progress-area .actions {
diff --git a/front/src/semantic.js b/front/src/semantic.js
index f5dad819256c1d08940c9dd304b4a1888ae1e6c0..206b59149fcc099e3c2f012b14149fe06f5ece00 100644
--- a/front/src/semantic.js
+++ b/front/src/semantic.js
@@ -1,24 +1,24 @@
-// require('semantic-ui-css/components/accordion.min.js')
-require('semantic-ui-css/components/api.min.js')
-require('semantic-ui-css/components/checkbox.min.js')
-// require('semantic-ui-css/components/colorize.min.js')
-require('semantic-ui-css/components/dimmer.min.js')
-require('semantic-ui-css/components/dropdown.min.js')
-// require('semantic-ui-css/components/embed.min.js')
-// require('semantic-ui-css/components/form.min.js')
-require('semantic-ui-css/components/modal.min.js')
-// require('semantic-ui-css/components/nag.min.js')
-// require('semantic-ui-css/components/popup.min.js')
-require('semantic-ui-css/components/progress.min.js')
-// require('semantic-ui-css/components/rating.min.js')
-require('semantic-ui-css/components/search.min.js')
-// require('semantic-ui-css/components/shape.min.js')
-// require('semantic-ui-css/components/sidebar.min.js')
-require('semantic-ui-css/components/site.min.js')
-require('semantic-ui-css/components/state.min.js')
-require('semantic-ui-css/components/sticky.min.js')
-// require('semantic-ui-css/components/tab.min.js')
-require('semantic-ui-css/components/transition.min.js')
-// require('semantic-ui-css/components/video.min.js')
-require('semantic-ui-css/components/visibility.min.js')
-// require('semantic-ui-css/components/visit.min.js')
+// require('fomantic-ui-css/components/accordion.min.js')
+require('fomantic-ui-css/components/api.min.js')
+require('fomantic-ui-css/components/checkbox.min.js')
+// require('fomantic-ui-css/components/colorize.min.js')
+require('fomantic-ui-css/components/dimmer.min.js')
+require('fomantic-ui-css/components/dropdown.min.js')
+// require('fomantic-ui-css/components/embed.min.js')
+// require('fomantic-ui-css/components/form.min.js')
+require('fomantic-ui-css/components/modal.min.js')
+// require('fomantic-ui-css/components/nag.min.js')
+// require('fomantic-ui-css/components/popup.min.js')
+require('fomantic-ui-css/components/progress.min.js')
+// require('fomantic-ui-css/components/rating.min.js')
+require('fomantic-ui-css/components/search.min.js')
+// require('fomantic-ui-css/components/shape.min.js')
+// require('fomantic-ui-css/components/sidebar.min.js')
+require('fomantic-ui-css/components/site.min.js')
+require('fomantic-ui-css/components/state.min.js')
+require('fomantic-ui-css/components/sticky.min.js')
+// require('fomantic-ui-css/components/tab.min.js')
+require('fomantic-ui-css/components/transition.min.js')
+// require('fomantic-ui-css/components/video.min.js')
+require('fomantic-ui-css/components/visibility.min.js')
+// require('fomantic-ui-css/components/visit.min.js')
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 4c6c6d61e4893dbf2e400426afaa717af648ab54..a15f339566e902646e327cb1f09c906a86a80b49 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -10,66 +10,66 @@
Import this file into your LESS project to use Semantic UI without build tools
*/
-// Those semantic-ui-css/*.scss don't exist in the package, but we create them
+// Those fomantic-ui-css/*.scss don't exist in the package, but we create them
// via scripts/link-scss-files.sh on postinstall, so we can include theme
// under a class namespace
/* Global */
-@import "~semantic-ui-css/components/reset.css";
+@import "~fomantic-ui-css/components/reset.css";
// we use our custom site css here to avoid loading google font
@import "./site";
/* Elements */
-@import "~semantic-ui-css/components/button.css";
-@import "~semantic-ui-css/components/container.css";
-@import "~semantic-ui-css/components/divider.css";
-// @import "~semantic-ui-css/components/flag.css";
-@import "~semantic-ui-css/components/header.css";
-@import "~semantic-ui-css/components/icon.css";
-@import "~semantic-ui-css/components/image.css";
-@import "~semantic-ui-css/components/input.css";
-@import "~semantic-ui-css/components/label.css";
-@import "~semantic-ui-css/components/list.css";
-@import "~semantic-ui-css/components/loader.css";
-@import "~semantic-ui-css/components/placeholder.css";
-// @import "~semantic-ui-css/components/rail.css";
-// @import "~semantic-ui-css/components/reveal.css";
-@import "~semantic-ui-css/components/segment.css";
-@import "~semantic-ui-css/components/step.css";
+@import "~fomantic-ui-css/components/button.css";
+@import "~fomantic-ui-css/components/container.css";
+@import "~fomantic-ui-css/components/divider.css";
+// @import "~fomantic-ui-css/components/flag.css";
+@import "~fomantic-ui-css/components/header.css";
+@import "~fomantic-ui-css/components/icon.css";
+@import "~fomantic-ui-css/components/image.css";
+@import "~fomantic-ui-css/components/input.css";
+@import "~fomantic-ui-css/components/label.css";
+@import "~fomantic-ui-css/components/list.css";
+@import "~fomantic-ui-css/components/loader.css";
+@import "~fomantic-ui-css/components/placeholder.css";
+// @import "~fomantic-ui-css/components/rail.css";
+// @import "~fomantic-ui-css/components/reveal.css";
+@import "~fomantic-ui-css/components/segment.css";
+@import "~fomantic-ui-css/components/step.css";
/* Collections */
-// @import "~semantic-ui-css/components/breadcrumb.css";
-@import "~semantic-ui-css/components/form.css";
-@import "~semantic-ui-css/components/grid.css";
-@import "~semantic-ui-css/components/menu.css";
-@import "~semantic-ui-css/components/message.css";
-@import "~semantic-ui-css/components/table.css";
+// @import "~fomantic-ui-css/components/breadcrumb.css";
+@import "~fomantic-ui-css/components/form.css";
+@import "~fomantic-ui-css/components/grid.css";
+@import "~fomantic-ui-css/components/menu.css";
+@import "~fomantic-ui-css/components/message.css";
+@import "~fomantic-ui-css/components/table.css";
/* Views */
-// @import "~semantic-ui-css/components/ad.css";
-@import "~semantic-ui-css/components/card.css";
-// @import "~semantic-ui-css/components/comment.css";
-// @import "~semantic-ui-css/components/feed.css";
-@import "~semantic-ui-css/components/item.css";
-@import "~semantic-ui-css/components/statistic.css";
+// @import "~fomantic-ui-css/components/ad.css";
+@import "~fomantic-ui-css/components/card.css";
+// @import "~fomantic-ui-css/components/comment.css";
+// @import "~fomantic-ui-css/components/feed.css";
+@import "~fomantic-ui-css/components/item.css";
+@import "~fomantic-ui-css/components/statistic.css";
/* Modules */
-// @import "~semantic-ui-css/components/accordion.css";
-@import "~semantic-ui-css/components/checkbox.css";
-@import "~semantic-ui-css/components/dimmer.css";
-@import "~semantic-ui-css/components/dropdown.css";
-// @import "~semantic-ui-css/components/embed.css";
-@import "~semantic-ui-css/components/modal.css";
-// @import "~semantic-ui-css/components/nag.css";
-@import "~semantic-ui-css/components/popup.css";
-@import "~semantic-ui-css/components/progress.css";
-// @import "~semantic-ui-css/components/rating.css";
-@import "~semantic-ui-css/components/search.css";
-// @import "~semantic-ui-css/components/shape.css";
-@import "~semantic-ui-css/components/sidebar.css";
-@import "~semantic-ui-css/components/sticky.css";
-@import "~semantic-ui-css/components/tab.css";
-@import "~semantic-ui-css/components/transition.css";
+// @import "~fomantic-ui-css/components/accordion.css";
+@import "~fomantic-ui-css/components/checkbox.css";
+@import "~fomantic-ui-css/components/dimmer.css";
+@import "~fomantic-ui-css/components/dropdown.css";
+// @import "~fomantic-ui-css/components/embed.css";
+@import "~fomantic-ui-css/components/modal.css";
+// @import "~fomantic-ui-css/components/nag.css";
+@import "~fomantic-ui-css/components/popup.css";
+@import "~fomantic-ui-css/components/progress.css";
+// @import "~fomantic-ui-css/components/rating.css";
+@import "~fomantic-ui-css/components/search.css";
+// @import "~fomantic-ui-css/components/shape.css";
+@import "~fomantic-ui-css/components/sidebar.css";
+@import "~fomantic-ui-css/components/sticky.css";
+@import "~fomantic-ui-css/components/tab.css";
+@import "~fomantic-ui-css/components/transition.css";
diff --git a/front/yarn.lock b/front/yarn.lock
index a00f8dc13c556ce41b29cbcd24909d34d62bb903..1959e9e1a99365dc02c6c9bd550592dce33854e0 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -3976,6 +3976,13 @@ follow-redirects@^1.0.0:
dependencies:
debug "^3.2.6"
+fomantic-ui-css@^2.7:
+ version "2.7.6"
+ resolved "https://registry.yarnpkg.com/fomantic-ui-css/-/fomantic-ui-css-2.7.6.tgz#8af84c0afce21142bf663979cf7452155562e6e2"
+ integrity sha512-oruD/DoMDZGSfK6fE3EnWKGad3vbhpiOtXrCwS0Bi+3QWXHwQsDU0k6P0Q8HzawoLXqHff83LmTDJWST5ARTxw==
+ dependencies:
+ jquery "^3.4.0"
+
for-in@^0.1.3:
version "0.1.8"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -5058,7 +5065,7 @@ javascript-stringify@^1.6.0:
resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
integrity sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=
-jquery@x.*:
+jquery@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
@@ -7870,13 +7877,6 @@ selfsigned@^1.10.4:
dependencies:
node-forge "0.7.5"
-semantic-ui-css@^2.4.1:
- version "2.4.1"
- resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz#f5aea39fafb787cbd905ec724272a3f9cba9004a"
- integrity sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==
- dependencies:
- jquery x.*
-
"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.7.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"