diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.css b/frontend/src/Search/Album/AddNewAlbumSearchResult.css index 48a07cdb6..c57cb1549 100644 --- a/frontend/src/Search/Album/AddNewAlbumSearchResult.css +++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.css @@ -34,17 +34,22 @@ .content { flex: 0 1 100%; + overflow: hidden; } -.name { +.titleRow { display: flex; - font-weight: 300; - font-size: 36px; } -.artistName { +.titleContainer { + display: flex; + align-items: flex-end; + flex: 0 1 auto; +} + +.title { font-weight: 300; - font-size: 20px; + font-size: 36px; } .year { @@ -52,6 +57,14 @@ color: $disabledColor; } +.icons { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1 0 auto; + height: 55px; +} + .mbLink { composes: link from '~Components/Link/Link.css'; @@ -75,3 +88,10 @@ margin-top: 20px; text-align: justify; } + +@media only screen and (max-width: $breakpointMedium) { + .titleRow { + justify-content: space-between; + overflow: hidden; + } +} diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.js b/frontend/src/Search/Album/AddNewAlbumSearchResult.js index 91ee59574..6bb40d619 100644 --- a/frontend/src/Search/Album/AddNewAlbumSearchResult.js +++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.js @@ -111,52 +111,42 @@ class AddNewAlbumSearchResult extends Component { }
-
- {title} - - { - !!disambiguation && - ({disambiguation}) - } - - { - isExistingAlbum ? - : - null - } - - - - - -
- -
- By: {artist.artistName} - - { - isExistingArtist ? +
+
+
+ {title} + + { + !!disambiguation && + ({disambiguation}) + } +
+
+ +
+ { + isExistingAlbum ? + : + null + } + + : - null - } + className={styles.mbLinkIcon} + name={icons.EXTERNAL_LINK} + size={28} + /> + +
diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.css b/frontend/src/Search/Artist/AddNewArtistSearchResult.css index b4dc336f2..d8266c734 100644 --- a/frontend/src/Search/Artist/AddNewArtistSearchResult.css +++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.css @@ -34,10 +34,20 @@ .content { flex: 0 1 100%; + overflow: hidden; } -.name { +.nameRow { display: flex; +} + +.nameContainer { + display: flex; + align-items: flex-end; + flex: 0 1 auto; +} + +.name { font-weight: 300; font-size: 36px; } @@ -47,6 +57,14 @@ color: $disabledColor; } +.icons { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1 0 auto; + height: 55px; +} + .mbLink { composes: link from '~Components/Link/Link.css'; @@ -70,3 +88,10 @@ margin-top: 20px; text-align: justify; } + +@media only screen and (max-width: $breakpointMedium) { + .titleRow { + justify-content: space-between; + overflow: hidden; + } +} diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.js b/frontend/src/Search/Artist/AddNewArtistSearchResult.js index 33fc67055..835060341 100644 --- a/frontend/src/Search/Artist/AddNewArtistSearchResult.js +++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.js @@ -111,44 +111,49 @@ class AddNewArtistSearchResult extends Component { }
-
- {artistName} - - { - !name.contains(year) && year ? - - ({year}) - : - null - } - - { - !!disambiguation && - ({disambiguation}) - } - - { - isExistingArtist ? +
+
+
+ {artistName} + + { + !artistName.contains(year) && year ? + + ({year}) + : + null + } + { + !!disambiguation && + ({disambiguation}) + } +
+
+ +
+ { + isExistingArtist ? + : + null + } + + : - null - } - - - - + className={styles.mbLinkIcon} + name={icons.EXTERNAL_LINK} + size={28} + /> + +