Fix links to fonts and images from CSS

element-hq#2961 put the CSS in a subdirectory, which meant that links from CSS to images and fonts were broken. Fix them up.
Half-Shot · Feb 9, 2017 · f771eed · f771eed
1 parent 6187eeb
commit f771eed
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('img/icon-return.svg');
+    background-image: url('../img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('img/icon_context_delete.svg');
+    background: url('../img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -65,7 +65,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background-image: url("img/icons_ellipsis.svg");
+    background-image: url("../img/icons_ellipsis.svg");
     background-size: 25px;
     width: 24px;
     height: 24px;

diff --git a/src/skins/vector/css/vector-web/_fonts.scss b/src/skins/vector/css/vector-web/_fonts.scss
@@ -3,44 +3,46 @@
  * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
  */
 
+/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
+ */
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
     font-weight: 600;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -52,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -50,7 +50,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('img/trans.png'); */
+    /* background-image: url('../img/trans.png'); */
     pointer-events: all;
 }