scale twitter icon
Этот коммит содержится в:
higsch
родитель
1cbd069a24
Коммит
17b8c55b09
@ -67,7 +67,7 @@
|
||||
"<script>\n // a score bar used on case tooltips\n export let value = 0;\n export let minValue = 0;\n export let maxValue = 1;\n\n $: relState = (value - minValue) / (maxValue - minValue);\n</script>\n\n<div class=\"score-bar\">\n <span class=\"inner-score-bar\"\n style=\"width: {relState * 100}%;\"></span>\n</div>\n\n<style>\n .score-bar {\n width: 100%;\n max-width: 70px;\n min-height: 10px;\n border: 1px solid var(--text-darkgray);\n border-radius: 3px;\n position: relative;\n }\n\n .inner-score-bar {\n height: 100%;\n background-color: var(--text-darkgray);\n border: none;\n position: absolute;\n }\n</style>\n",
|
||||
"<script>\n // score questions and answers used on the case tooltips\n import { uniqBy } from 'lodash';\n import { questions, scores, maxScores } from '../inputs/scores';\n\n export let timePoint;\n\n const ans = (int) => int === 1 ? true : false;\n</script>\n\n<div class=\"score-questions\">\n {#each scores as s}\n <h4>{s.scoreName}: {timePoint[s.score]}/{maxScores[s.score]}</h4>\n <ul>\n {#each questions.filter((d) => d.score === s.score) as q (q.id)}\n <li>\n <input type=\"checkbox\" checked={ans(timePoint[q.column])} />\n <span class=\"checkmark\"></span>\n <p>{q.text}</p>\n </li>\n {/each}\n </ul>\n {/each}\n</div>\n\n<style>\n ul {\n margin: 0.3rem 0;\n list-style-type: none;\n }\n\n h4 {\n margin: 1rem 0 0 0;\n font-size: 0.8rem;\n font-weight: bold;\n color: var(--text-black);\n }\n\n li {\n display: block;\n margin: 0.3rem 0;\n padding-left: 20px;\n position: relative;\n }\n\n li p {\n font-family: var(--font-02);\n font-size: 0.8rem;\n line-height: 1.5;\n color: var(--text-black);\n }\n\n li input {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n }\n\n .checkmark {\n position: absolute;\n top: 5px;\n left: 0;\n height: 15px;\n width: 15px;\n border: none;\n border-radius: 2px;\n background-color: var(--bg);\n }\n\n .checkmark:after {\n content: '';\n display: none;\n position: absolute;\n }\n\n li input:checked ~ .checkmark:after {\n display: block;\n }\n\n li .checkmark:after {\n left: 5px;\n top: 2px;\n width: 3px;\n height: 7px;\n border: solid var(--usa-blue);\n border-width: 0 3px 3px 0;\n transform: rotate(45deg);\n }\n</style>\n",
|
||||
"<script>\n // free text search bar\n import { createEventDispatcher } from 'svelte';\n\n export let searchString = '';\n export let label = '';\n\n const dispatch = createEventDispatcher();\n\n function reset() {\n searchString = '';\n search();\n }\n\n function handleKeyUp(e) {\n if (e && e.keyCode === 13) search();\n }\n\n function handleGoClick() {\n search();\n }\n\n function search() {\n dispatch('change', searchString);\n }\n</script>\n\n<div class=\"search-text\">\n <div class=\"label\">\n <p>{label}</p>\n <p>|</p>\n <span on:click={() => reset()}>Reset</span>\n </div>\n <div class=\"search\">\n <input id=\"table-search-field\"\n type=\"text\"\n placeholder=\"Type and press enter\"\n bind:value={searchString}\n on:keyup={(e) => handleKeyUp(e)} />\n {#if (searchString !== '')}\n <span class=\"button-fields\">\n <span class=\"reset\"\n class:active={searchString}\n on:click={() => searchString = ''}>\n x\n </span>\n <span class=\"go\"\n class:active={searchString}\n on:click={() => handleGoClick()}>\n Go\n </span>\n </span>\n {/if}\n </div>\n</div>\n\n<style>\n .search-text {\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n font-family: var(--font-02);\n width: 200px;\n max-width: 200px;\n min-width: 200px;\n margin: 0.3rem 0.3rem 0 0.3rem;\n position: relative;\n pointer-events: all;\n }\n\n .label {\n display: flex;\n margin: 0 0 0.1rem 0;\n font-size: 0.7rem;\n color: var(--usa-blue);\n }\n\n .label > * {\n padding-right: 0.2rem;\n }\n\n .label span {\n margin: 0 -0.1rem;\n padding: 0 0.1rem;\n color: var(--usa-blue);\n border: none;\n border-radius: 3px;\n cursor: pointer;\n transition: all 200ms ease;\n }\n\n .label span:hover {\n color: var(--bg);\n background-color: var(--usa-blue);\n }\n\n .search {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 1.7rem;\n font-size: 0.8rem;\n background-color: var(--bg);\n border: 2px solid var(--usa-blue);\n border-radius: 3px;\n position: relative;\n }\n\n input {\n width: 100%;\n height: 100%;\n padding: 0.1rem 2.3rem 0.1rem 0.3rem;\n font-size: 0.8rem;\n color: var(--text-black);\n background-color: var(--bg);\n border: none;\n }\n\n .button-fields {\n display: block;\n position: absolute;\n bottom: 0.2rem;\n right: 0.3rem;\n z-index: 10001;\n }\n\n .reset {\n display: none;\n margin-right: 0.3rem;\n cursor: pointer;\n }\n\n .go {\n cursor: pointer;\n }\n</style>\n",
|
||||
"<script>\n import {\n disinformantNationFilter,\n platformFilter,\n methodFilter,\n sourceFilter,\n sourceCategoryFilter,\n attributionScoreFilter,\n attributionScoreDef,\n textSearchFilter,\n originalTimeDomain,\n contextData } from '../stores/filters';\n import { urlFromFilters } from '../utils/share';\n\n import Icon from 'svelte-awesome';\n import { twitter, clipboard } from 'svelte-awesome/icons';\n\n export let text = 'Share this view.';\n export let caseId = '';\n export let mode = 'standard';\n\n async function copyToClipBoard() {\n await navigator.clipboard.writeText(url);\n const previousText = text;\n text = 'Copied!';\n setTimeout(() => text = previousText, 3000);\n }\n\n $: url = urlFromFilters(\n $disinformantNationFilter,\n $platformFilter,\n $methodFilter,\n $sourceFilter,\n $sourceCategoryFilter,\n $attributionScoreFilter,\n $textSearchFilter,\n $contextData,\n caseId);\n</script>\n\n<div class=\"share\">\n <p class:gray={mode === 'tooltip'}>{text}</p>\n <a class=\"twitter-share-button\"\n class:gray={mode === 'tooltip'}\n href=\"https://twitter.com/intent/tweet?url={url.replace('#', '%23')}\"\n data-size=\"large\"\n target=\"_blank\">\n <Icon data={twitter}/>\n </a>\n <span class=\"pseudolink\"\n class:gray={mode === 'tooltip'}\n on:click={copyToClipBoard}>\n <Icon data={clipboard}/>\n </span>\n</div>\n\n<style>\n .share {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-02);\n font-size: 0.7rem;\n pointer-events: all;\n }\n\n p {\n color: var(--usa-blue);\n }\n\n a {\n margin: 0 0.4rem;\n }\n\n .gray {\n color: var(--text-darkgray);\n transition: all 200ms ease;\n }\n\n .gray:hover {\n color: var(--text-black);\n }\n</style>\n",
|
||||
"<script>\n import {\n disinformantNationFilter,\n platformFilter,\n methodFilter,\n sourceFilter,\n sourceCategoryFilter,\n attributionScoreFilter,\n attributionScoreDef,\n textSearchFilter,\n originalTimeDomain,\n contextData } from '../stores/filters';\n import { urlFromFilters } from '../utils/share';\n\n import Icon from 'svelte-awesome';\n import { twitter, clipboard } from 'svelte-awesome/icons';\n\n export let text = 'Share this view.';\n export let caseId = '';\n export let mode = 'standard';\n\n async function copyToClipBoard() {\n await navigator.clipboard.writeText(url);\n const previousText = text;\n text = 'Copied!';\n setTimeout(() => text = previousText, 3000);\n }\n\n $: url = urlFromFilters(\n $disinformantNationFilter,\n $platformFilter,\n $methodFilter,\n $sourceFilter,\n $sourceCategoryFilter,\n $attributionScoreFilter,\n $textSearchFilter,\n $contextData,\n caseId);\n</script>\n\n<div class=\"share\">\n <p class:gray={mode === 'tooltip'}>{text}</p>\n <a class=\"twitter-share-button\"\n class:gray={mode === 'tooltip'}\n href=\"https://twitter.com/intent/tweet?url={url.replace('#', '%23')}\"\n data-size=\"large\"\n target=\"_blank\">\n <Icon data={twitter} scale=\"1.2\" />\n </a>\n <span class=\"pseudolink\"\n class:gray={mode === 'tooltip'}\n on:click={copyToClipBoard}>\n <Icon data={clipboard}/>\n </span>\n</div>\n\n<style>\n .share {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-02);\n font-size: 0.7rem;\n pointer-events: all;\n }\n\n p {\n color: var(--usa-blue);\n }\n\n a {\n margin: 0 0.4rem;\n }\n\n .gray {\n color: var(--text-darkgray);\n transition: all 200ms ease;\n }\n\n .gray:hover {\n color: var(--text-black);\n }\n</style>\n",
|
||||
"<script>\n // shiny circle around balloons\n import { fade } from 'svelte/transition';\n import { bloomDuration, growDuration, jitterFactor } from '../transitions/constants';\n import { sortConsistently } from '../utils/misc';\n\n export let timePoint;\n export let selected = false;\n export let hovered = false;\n\n let sortedRadii = [];\n\n $: if (timePoint) sortedRadii = [\n {\n id: 2,\n className: 'reddit',\n r: timePoint.rSmiReShare + timePoint.rSmiTwShare + timePoint.rSmiFbShare,\n },\n {\n id: 1,\n className: 'twitter',\n r: timePoint.rSmiTwShare + timePoint.rSmiFbShare,\n },\n {\n id: 0,\n className: 'facebook',\n r: timePoint.rSmiFbShare,\n }\n ]\n .map((d) => ({...d, r: d.r * sizeFactor}));\n\n $: sizeFactor = timePoint.rSmiTot / 100;\n</script>\n\n<g class=\"shiny-circle\"\n class:selected={selected || hovered}\n transform=\"translate({timePoint.x} {timePoint.fy})\"\n in:fade|local={{duration: bloomDuration, delay: growDuration + timePoint.id * jitterFactor}}\n out:fade|local={{duration: bloomDuration, delay: timePoint.id * jitterFactor}}>\n {#each sortedRadii as {id, className, r} (id)}\n <circle class={className}\n cx=\"0\"\n cy=\"0\"\n r={r + timePoint.rSmiTot} />\n {/each}\n</g>\n\n<style>\n g {\n opacity: 0.04;\n transition: opacity 400ms ease;\n pointer-events: none;\n }\n\n g.selected {\n opacity: 0.76;\n }\n\n circle {\n stroke: none;\n opacity: 1;\n }\n</style>\n",
|
||||
"<script>\n // a custom slider for score selection\n import { createEventDispatcher, onMount } from 'svelte';\n import { scaleLinear } from 'd3';\n import { slidable } from '../actions/slidable';\n\n export let label = '';\n export let min = 0;\n export let max = 10;\n export let value = [0, 10];\n export let showHandleLabels = true;\n export let startColor = 'white';\n export let stopColor = 'red';\n\n const dispatch = createEventDispatcher();\n const handleWidth = 17;\n\n const pos = {\n left: 0,\n right: 0\n };\n\n let sliderWidth = 0;\n\n function handleSlide(e, side) {\n const newPos = pos[side] + e.detail.dx;\n\n if (newPos < 0 || newPos > sliderWidth) return;\n if (side === 'left' && newPos > pos.right) return;\n if (side === 'left' && newPos < scale.range()[0]) return;\n if (side === 'right' && newPos < pos.left) return;\n if (side === 'right' && newPos > scale.range()[1]) return;\n \n pos[side] = newPos;\n }\n\n function handleSlideEnd(e, side) {\n dispatch('changed', [Math.round(scale.invert(pos.left), 0),\n Math.round(scale.invert(pos.right), 0)]);\n }\n\n $: scale = scaleLinear()\n .domain([min, max])\n .range([handleWidth / 2, sliderWidth - 1.7 * handleWidth]);\n\n $: pos.left = scale(value[0]) || 0;\n $: pos.right = scale(value[1]) || 0;\n</script>\n\n<div class=\"slider\"\n bind:clientWidth={sliderWidth}\n style=\"--handle-width: {handleWidth}px;\">\n <div class=\"label\">\n {label}\n </div>\n <div class=\"slider-body\">\n <div class=\"slider-selected-range\"\n style=\"width: {sliderWidth - 3 * handleWidth}px;\n margin-left: {1.5 * handleWidth}px;\n background: linear-gradient(90deg, {startColor}, {stopColor});\"></div>\n <div class=\"slider-handle\"\n class:no-label={!showHandleLabels}\n style=\"left: {(value[0] === value[1]) ? pos.left - 5 : pos.left}px;\"\n use:slidable\n on:slide={(e) => handleSlide(e, 'left')}\n on:slideend={(e) => handleSlideEnd(e, 'left')}>\n <span class=\"disable-select\">{showHandleLabels ? Math.round(scale.invert(pos.left), 0) : ''}</span>\n </div>\n <div class=\"slider-handle\"\n class:no-label={!showHandleLabels}\n style=\"left: {(value[0] === value[1]) ? pos.right + 5 : pos.right}px;\"\n use:slidable\n on:slide={(e) => handleSlide(e, 'right')}\n on:slideend={(e) => handleSlideEnd(e, 'right')}>\n <span class=\"disable-select\">{showHandleLabels ? Math.round(scale.invert(pos.right), 0) : ''}</span>\n </div>\n </div>\n</div>\n\n<style>\n .slider {\n display: flex;\n flex-direction: column;\n font-family: var(--font-02);\n width: 200px;\n max-width: 200px;\n margin: 0.3rem 0.3rem 0 0.3rem;\n position: relative;\n pointer-events: all;\n }\n\n .label {\n margin: 0 0 0.1rem 0;\n font-size: 0.7rem;\n color: var(--usa-blue);\n }\n\n .slider-body {\n display: flex;\n align-items: center;\n width: 100%;\n height: 1.7rem;\n padding: 0.1rem 0;\n font-size: 0.7rem;\n background-color: var(--bg);\n border: 2px solid var(--usa-blue);\n border-radius: 3px;\n position: relative;\n }\n\n .slider-selected-range {\n height: 8px;\n border: none;\n border-radius: 2px;\n position: absolute;\n z-index: 100;\n }\n\n .slider-handle {\n width: var(--handle-width);\n height: var(--handle-width);\n border: 2px solid var(--usa-blue);\n border-radius: 50%;\n background-color: var(--bg);\n cursor: pointer;\n position: absolute;\n z-index: 10000;\n }\n\n .slider-handle > span {\n width: 100%;\n height: 100%;\n font-size: 0.7rem;\n text-align: center;\n color: var(--usa-blue);\n position: absolute;\n }\n</style>\n",
|
||||
"<script>\n // a source link\n import { draw } from 'svelte/transition';\n import { mapHeight, minDim } from '../stores/dimensions';\n import { linear } from 'svelte/easing';\n import { growDuration, bloomDuration, jitterFactor } from '../transitions/constants';\n import { curvyDoubleLine } from '../utils/paths';\n\n export let source;\n export let selected = 'unselected';\n export let hovered = 'unselected';\n export let extraFaint = false;\n\n function setOpacity(selected, hovered, extraFaint) {\n if (extraFaint) return 0.2 / 3 / 2;\n\n let opacity = 0.5 / source.disinformantNation.length;\n\n if (selected === 'selected' || hovered === 'selected') {\n opacity = 0.95;\n return(opacity);\n }\n if (selected === 'background' || hovered === 'background') opacity = 0.2 / source.disinformantNation.length;\n\n return(opacity);\n }\n\n $: opacity = setOpacity(selected, hovered, extraFaint);\n</script>\n\n{#if (source.show)}\n <g class=\"source-link\"\n style=\"opacity: {opacity}; transition: all 700ms ease;\"\n class:selected={selected || hovered}>\n <path d={curvyDoubleLine(source.xCountry,\n source.yCountry,\n source._x,\n source._y,\n source.x,\n source.fy + source.rSmiTot - 5,\n source.shift,\n $mapHeight / 15)}\n stroke-width={$minDim / 200}\n in:draw|local={{duration: growDuration, delay: source.id * jitterFactor, easing: linear}}\n out:draw|local={{duration: growDuration, delay: bloomDuration + source.id * jitterFactor, easing: linear}}></path>\n </g>\n{/if}\n\n<style>\n path {\n stroke: var(--usa-blue);\n fill: none;\n }\n\n .selected path {\n opacity: 1;\n }\n</style>\n",
|
||||
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
@ -45,7 +45,7 @@
|
||||
href="https://twitter.com/intent/tweet?url={url.replace('#', '%23')}"
|
||||
data-size="large"
|
||||
target="_blank">
|
||||
<Icon data={twitter}/>
|
||||
<Icon data={twitter} scale="1.2" />
|
||||
</a>
|
||||
<span class="pseudolink"
|
||||
class:gray={mode === 'tooltip'}
|
||||
|
||||
Загрузка…
x
Ссылка в новой задаче
Block a user