Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
30601 amit.gupta 1 
<h3 style="margin-top:-2px;margin-bottom:24px"><strong>My Performance</strong></h3>
2 
<style>
3 
 
4 
    .investment-ok > * {
5 
        background-color: #ddffdd;
6 
    }
7 
 
8 
    body {
9 
        --grey-100: #e4e9f0;
10 
        --grey-200: #cfd7e3;
11 
        --grey-300: #b5c0cd;
12 
        --grey-800: #3e4e63;
13 
        --grid-gap: 1px;
14 
        --day-label-size: 20px;
15 
    }
16 
 
17 
    .checkmark {
18 
        display: inline-block;
19 
        transform: rotate(45deg);
20 
        height: 40px;
21 
        width: 20px;
22 
        margin-left: 40%;
23 
        border-bottom: 7px solid #78b13f;
24 
        border-right: 7px solid #78b13f;
25 
    }
26 
 
27 
    .minus
28 
    ol,
29 
    li {
30 
        padding: 0;
31 
        margin: 0;
32 
        list-style: none;
33 
    }
34 
 
35 
    .calendar-month {
36 
        position: relative;
37 
        background-color: var(--grey-200);
38 
        border: solid 1px var(--grey-200);
39 
    }
40 
 
41 
    .calendar-month-header {
42 
        display: flex;
43 
        justify-content: space-between;
44 
        background-color: #fff;
45 
        padding: 10px;
46 
    }
47 
 
48 
    .calendar-month-header-selected-month {
49 
        font-size: 24px;
50 
        font-weight: 600;
51 
    }
52 
 
53 
    .calendar-month-header-selectors {
54 
        display: flex;
55 
        align-items: center;
56 
        justify-content: space-between;
57 
        width: 80px;
58 
    }
59 
 
60 
    .calendar-month-header-selectors > * {
61 
        cursor: pointer;
62 
    }
63 
 
64 
    .day-of-week {
65 
        color: var(--grey-800);
66 
        font-size: 18px;
67 
        background-color: #fff;
68 
        padding: 0;
69 
        margin: 0;
70 
    }
71 
 
72 
    .day-of-week,
73 
    .days-grid {
74 
        display: grid;
75 
        grid-template-columns: repeat(7, 1fr);
76 
        padding: 0;
77 
        margin: 0;
78 
    }
79 
 
80 
    .day-of-week > * {
81 
        text-align: center;
82 
        padding-right: 5px;
83 
    }
84 
 
85 
    .days-grid {
86 
        height: 100%;
87 
        position: relative;
88 
        grid-column-gap: var(--grid-gap);
89 
        grid-row-gap: var(--grid-gap);
90 
        border-top: solid 1px var(--grey-200);
91 
    }
92 
 
93 
    .calendar-day {
94 
        position: relative;
95 
        font-size: 16px;
96 
        background-color: #fff;
97 
        color: var(--grey-800);
98 
        padding: 5px;
99 
    }
100 
 
101 
    .calendar-day > span {
102 
        display: flex;
103 
        justify-content: center;
104 
        align-items: center;
105 
        position: absolute;
106 
        right: 2px;
107 
        width: var(--day-label-size);
108 
        height: var(--day-label-size);
109 
    }
110 
 
111 
    .calendar-day--not-current {
112 
        background-color: var(--grey-100);
113 
        color: var(--grey-300);
114 
    }
115 
 
116 
    .calendar-day--today {
117 
        padding-top: 4px;
118 
    }
119 
 
120 
    .calendar-day--today > span {
121 
        color: #fff;
122 
        border-radius: 9999px;
123 
        background-color: var(--grey-800);
124 
    }
125 
 
126 
</style>
127 
<div class="row">
128 
    <div class="calendar-month">
129 
 
130 
        <ol id="days-of-week" class="day-of-week">
131 
            #foreach($weekDate in $investmentMap.keySet())
132 
                <li>$wf.format($weekDate)</li>
133 
            #end
134 
        </ol>
135 
 
136 
        <ol id="calendar-days" class="days-grid investment-ok">
137 
            #foreach($investmentEntry in $investmentMap.entrySet())
138 
                #set($inventmentObj = $investmentEntry.getValue())
139 
                #set($investmentDate = $investmentEntry.getKey())
140 
                <li class="calendar-day
141 
                #if($today.equals($investmentDate))
142 
                    calendar-day--today
143 
                #end"
144 
                >
145 
                    #if($inventmentObj.isInvestmentOk())
146 
                        <div class="checkmark"></div>
147 
                    #end
148 
                </li>
149 
            #end
150 
        </ol>
151 
    </div>
152 
</div>