src/components/LeftPanel.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<script lang="js">

    import {
        leftPanelCardId,
        leftPanelCardDesc,
    } from '../control/left_panel';

    import { cardImageUrl } from '../utils';


</script>

<div class="left-panel">
    <div class="card-preview">
        <div class="card-image-large">
            {#if $leftPanelCardId}
                <img height="100%" src={cardImageUrl($leftPanelCardId)} alt="card img">
            {/if}
        </div>
        <div class="card-description">
            <pre class="card-desc-text">{$leftPanelCardDesc}</pre>
        </div>
    </div>
</div>

<style>

.left-panel {
    width: 25%;
    padding: 20px;
    background-color: #f5f5f5;
}

.card-image-large {
    height: 40vh;
    text-align: center;
    background-color: #ddd;
    margin-bottom: 20px;
    border-radius: 8px;
}

.card-description {
    line-height: 1.6;
    font-size: 14px;
    height: 55vh;
}

.card-desc-text {
      height: 45vh; 
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: auto;
}

</style>