Angular Material 2 - Веб-сайт неправильно отображает весь экран - PullRequest
Новая
       7

Angular Material 2 - Веб-сайт неправильно отображает весь экран

0 голосов
/ 17 мая 2018

Я пытаюсь слегка переписать свое приложение. Раньше я только создавал приложения с помощью Sidenavs, однако сейчас мне это не нужно на веб-сайте, над которым я работаю. Проблема в том, что я не могу найти способ удалить контейнер sidenav без того, чтобы он не нарушил фоновое изображение, панель навигации была липкой и т. Д. Я не могу найти что-то на материале material.angular.io, которое ссылается на что-либо как это или может исправить это.

Если кто-нибудь знает, как решить эту проблему, пожалуйста, укажите мне документацию / что я могу изменить, чтобы это исправить.

Github для сайта

с мат-сиденав-контейнером enter image description here

Sidenav контейнер в качестве div enter image description here

div с css, взятым из контейнера sidenav enter image description here

1 Ответ

0 голосов
/ 18 мая 2018

Вот быстрое исправление

app.component.html

<!-- <mat-sidenav-container fullscreen class="sidenav-container"> -->
<!-- <mat-toolbar class="toolbar"> -->
<!-- <div class="social-media" id="discord" (click)="navigateToDiscord()"> -->
<!-- <img src="../../assets/discord.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToTwitch()"> -->
<!-- <img src="../../assets/twitch.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToTwitter()"> -->
<!-- <img src="../../assets/twitter.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="social-media" (click)="navigateToYoutube()"> -->
<!-- <img src="../../assets/youtube.png"> -->
<!-- </div> -->
<!--  -->
<!-- <div class="themeathon-name"> -->
<!-- <div class="name-span"> -->
<!-- <span>THEMEATHON</span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </mat-toolbar> -->
<!--  -->
<!-- <stream-component></stream-component> -->
<!--  -->
<!-- </mat-sidenav-container> -->



<div class="background">

    <div class="toolbar">
        <div class="social-media-container">
            <div class="social-media" id="discord" (click)="navigateToDiscord()">
                <img src="../../assets/discord.png">
            </div>

            <div class="social-media" (click)="navigateToTwitch()">
                <img src="../../assets/twitch.png">
            </div>

            <div class="social-media" (click)="navigateToTwitter()">
                <img src="../../assets/twitter.png">
            </div>

            <div class="social-media" (click)="navigateToYoutube()">
                <img src="../../assets/youtube.png">
            </div>
        </div>

        <div class="themeathon-name">
            <div class="name-span">
                <span>THEMEATHON</span>
            </div>
        </div>
    </div>
    <stream-component></stream-component>
</div>

Добавлен класс CSS .background в app.component.css

.background {
    background-image: url(../../assets/japan.jpg);
}
 .toolbar {
    top: 0;
    position: sticky;
    position: -webkit-sticky;
    z-index: 50;
    width: 100%;
    background-color: black;
    height: 70px;
}

.social-media-container,
.themeathon-name {
    position: absolute;
    top: calc(50% - 16px);
}

.social-media {
    padding-top: 6px;
    margin: 0 25px;
    cursor: pointer;
    display: inline;
}

.social-media img {
    fill: #fff;
    width: 32px;
    height: 32px;
}

.social-media-text {
    float: right;
    margin-left: 6px;
}

.themeathon-name {
    width: 100%;
    text-align: center;
}

.themeathon-name span {
    font-family: SAMURAI, Roboto, "Helvetica Neue", sans-serif;
    font-size: 32px;
    color: #fff;
    letter-spacing: 10px;
    display: block;
    margin: auto 26%;
}

enter image description here Это то, что вы ищете?

Вот экран, когда я опускаюсь вниз enter image description here

...